jQuery实现所有验证通过方可提交的表单验证


Posted in jQuery onNovember 21, 2017

本文实例为大家分享了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:;" rel="external nofollow" ><img class='submit' type='image' src='./images/reg.gif' /></a>
</form>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 #jQuery
jquery ajaxfileupload异步上传插件
Nov 21 #jQuery
jquery中有哪些api jQuery主要API
Nov 20 #jQuery
jquery ztree实现右键收藏功能
Nov 20 #jQuery
jQuery实现checkbox的简单操作
Nov 18 #jQuery
基于jquery实现五星好评
Nov 18 #jQuery
jQuery实现滚动效果
Nov 17 #jQuery
You might like
PHP源码之explode使用说明
2011/08/05 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
php实现文章评论系统
2019/02/18 PHP
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python中断言Assertion的一些改进方案
2016/10/27 Python
python中强大的format函数实例详解
2018/12/05 Python
Python 移动光标位置的方法
2019/01/20 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
StringBuilder和String的区别
2015/05/18 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
村干部四风问题整改措施
2014/09/30 职场文书