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手风琴的简单制作
May 12 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery实现简易QQ聊天框
Feb 10 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中使用sftp教程
2015/03/30 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
iview实现图片上传功能
2020/06/29 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
python 利用zmail库发送邮件
2020/09/11 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
标准导师推荐信(医学类)
2013/10/28 职场文书
毕业生自我推荐
2013/11/04 职场文书
升职自荐书范文
2013/11/28 职场文书
《乌塔》教学反思
2014/02/17 职场文书
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android