基于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 技巧和窍门整理(8个)
Apr 22 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
vue-dialog的弹出层组件
May 25 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
微信小程序 select 下拉框组件功能
Sep 09 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 $_SERVER详解
2009/01/16 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python中的 enum 模块源码详析
2019/01/09 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
python实现飞机大战项目
2020/03/11 Python
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
预备党员转正思想汇报
2014/01/12 职场文书
租房合同协议书
2014/04/09 职场文书
合伙经营协议书
2014/04/18 职场文书
法语专业求职信
2014/07/20 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
效能风暴心得体会
2014/09/04 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python