基于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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 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实现用户在线时间统计详解
2011/10/08 PHP
php简单统计在线人数的方法
2016/05/10 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
jQuery入门知识简介
2010/03/04 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
JS分页效果示例
2013/10/11 Javascript
js星星评分效果
2014/07/24 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
keras:model.compile损失函数的用法
2020/07/01 Python
python Matplotlib模块的使用
2020/09/16 Python
美国现代家具购物网站:LexMod
2019/01/09 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
信息管理专业自荐书
2014/06/05 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
2014年班主任工作总结
2014/11/08 职场文书
护士自荐信怎么写
2015/03/06 职场文书
植树节新闻稿
2015/07/17 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL