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中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery实现图片切换效果
Oct 19 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 组件化编程技巧
2009/06/06 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
Aptana调试javascript图解教程
2009/11/30 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
采用call方式实现js继承
2014/05/20 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
python使用matplotlib画饼状图
2018/09/25 Python
Python实现FM算法解析
2019/06/18 Python
Python创建数字列表的示例
2019/11/28 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
师德学习感言
2014/01/31 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
作风大整顿心得体会
2014/09/10 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书