基于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 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
js中常用的Math方法总结
Jan 12 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
Python聊天室实例程序分享
2016/01/05 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
婚礼证婚人证婚词
2014/01/08 职场文书
大学生个人事迹材料
2014/01/21 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL