基于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 相关文章推荐
深入理解javascript原型链和继承
Sep 23 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
TypeScript 中接口详解
Jun 19 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
jQuery常用选择器详解
Jul 17 jQuery
ES6中的Promise代码详解
Oct 09 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
浅析Python多线程下的变量问题
2015/04/28 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
应届毕业生求职信范文
2013/12/18 职场文书
水利学院求职自荐书
2014/02/01 职场文书
理发店策划方案
2014/06/05 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
大学生作弊检讨书
2014/09/11 职场文书
四风问题对照检查材料
2014/09/22 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
Python 内置函数速查表一览
2021/06/02 Python
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android