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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 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
URL Rewrite的设置方法
2007/01/02 PHP
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php实现word转html的方法
2016/01/22 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python入门必须知道的11个知识点
2018/03/21 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python读文件的步骤
2019/10/08 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
会计专业毕业生自我评价
2013/09/25 职场文书
药品促销活动方案
2014/02/14 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
《在家里》教后反思
2014/03/01 职场文书
园艺师求职信
2014/03/10 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript