基于Jquery实现表单验证


Posted in Javascript onJuly 20, 2020

有时在我们注册账户、登陆系统时,当所有验证通过方可提交 这就需要Jquery来实现表单验证,今天分享给小伙伴们一段基于Jquery实现表单验证的代码。

<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Reg</title>
  <style>
   .state1{
    color:#aaa;
   }
   .state2{
    color:#000;
   }
   .state3{
    color:red;
   }
   .state4{
    color:green;
   }
  </style>
  <script src="jquery.js"></script>
  <script>
   $(function(){
 
    var ok1=false;
    var ok2=false;
    var ok3=false;
    var ok4=false;
    // 验证用户名
    $('input[name="username"]').focus(function(){
     $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state2');
    }).blur(function(){
     if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){
      $(this).next().text('输入成功').removeClass('state1').addClass('state4');
      ok1=true;
     }else{
      $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state3');
     }
      
    });
 
    //验证密码
    $('input[name="password"]').focus(function(){
     $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state2');
    }).blur(function(){
     if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){
      $(this).next().text('输入成功').removeClass('state1').addClass('state4');
      ok2=true;
     }else{
      $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state3');
     }
      
    });
 
    //验证确认密码
     $('input[name="repass"]').focus(function(){
     $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state2');
    }).blur(function(){
     if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){
      $(this).next().text('输入成功').removeClass('state1').addClass('state4');
      ok3=true;
     }else{
      $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3');
     }
      
    });
 
    //验证邮箱
    $('input[name="email"]').focus(function(){
     $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state2');
    }).blur(function(){
     if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
      $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');
     }else{     
      $(this).next().text('输入成功').removeClass('state1').addClass('state4');
      ok4=true;
     }
      
    });
 
    //提交按钮,所有验证通过方可提交
 
    $('.submit').click(function(){
     if(ok1 && ok2 && ok3 && ok4){
      $('form').submit();
     }else{
      return false;
     }
    });
     
   });
  </script>
 </head>
<body>
 
<form action='do.php' method='post' >
 用 户 名:<input type="text" name="username">
    <span class='state1'>请输入用户名</span><br/><br/>
 密码:<input type="password" name="password">
    <span class='state1'>请输入密码</span><br/><br/>
 确认密码:<input type="password" name="repass">
    <span class='state1'>请输入确认密码</span><br/><br/>
 邮
箱:<input type="text" name="email">
    <span class='state1'>请输入邮箱</span><br/><br/> 
 <a href="javascript:;"><img class='submit' type='image' src='./images/reg.gif' /></a>
</form>
</body>
</html>

以上就是本文的全部内容,希望大家可以喜欢。

Javascript 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
用javascript实现分割提取页面所需内容
May 09 Javascript
Web开发之JavaScript
Mar 29 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
Redux实现组合计数器的示例代码
Jul 04 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 #Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 #Javascript
javascript控制图片播放的实现代码
Jul 29 #Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 #Javascript
Javascript实现鼠标右键特色菜单
Aug 04 #Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 #Javascript
常用的Javascript数据验证插件
Aug 04 #Javascript
You might like
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
python实战教程之自动扫雷
2018/07/13 Python
python 切换root 执行命令的方法
2019/01/19 Python
如何通过Python实现标签云算法
2019/07/02 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
HashMap和Hashtable的区别
2013/05/18 面试题
日语求职信范文
2013/12/17 职场文书
公司晚会主持词
2014/03/22 职场文书
2014年教师节活动总结
2014/08/29 职场文书
违反交通法规检讨书
2014/09/10 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL