基于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 相关文章推荐
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
JS原型链怎么理解
Jun 27 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 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
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
js判断undefined变量类型使用typeof
2013/06/03 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
分析Python中解析构建数据知识
2018/01/20 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
竞选大学学委演讲稿
2014/09/13 职场文书
业务员岗位职责范本
2015/04/03 职场文书
三国演义读书笔记
2015/06/25 职场文书
保护动物的宣传语
2015/07/13 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android