jQuery中使用validate插件校验表单功能


Posted in jQuery onMay 24, 2019

一.功能效果

jQuery中使用validate插件校验表单功能

二.部分特殊规则

2.1 错误信息位置更改

在表单某选项中增加代码

<label class="error" for="表单中选项的name"></label>

例如 : 性别必选

<td>
 <input type="radio" id="male" value="m" name="sex"/>男
 <input type="radio" id="female" value="f" name="sex"/>女
 <!--这里设置表单校验错误信息的显示位置-->
 <label class="error" for="sex"></label>
</td>

2.2 身份证验证

在<script>标签中 , 增加身份证格式验证的自定义规则

/*身份证格式验证*/
$.validator.addMethod("card", function (value, element, params) {
  var reg = /^\d{15}(\d{2}[\dX])?$/i;
  return reg.test(value);
}, "idcard error");

在rule和message中增加相应的规则判定

$("#empForm").validate({
  rules: {
    idcard: {
      card: true
    }
  },
  messages: {
    idcard: {
      card: "请输入有效身份证号"
    }
  }
});

2.3 手机号验证

在<script>标签中 , 增加手机号格式验证的自定义规则

/*手机号格式验证*/
$.validator.addMethod("phone", function (value, element, params) {
  var reg = /^1[34578]\d{9}$/;
  return reg.test(value);
}, "phone error");

在rule和message中增加相应的规则判定

$("#empForm").validate({
  rules: {
    phone: {
      phone: true
    }
  },
  messages: {
    phone: {
      phone: "请输入有效身份证号"
    }
  }
});

jQuery中使用validate插件校验表单功能

三.整体代码

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>我的jquery表单校验页面</title>
  <style type="text/css">
    h1 {
      text-align: center;
    }
    table {
      width: 80%;
      margin: 0 auto;
      border-collapse: collapse;
    }
    td {
      padding: 10px 14px;
      border: 1px solid #999;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>
<h1>员工信息录入</h1>
<form name="empForm" id="empForm" method="get" action="#">
  <table>
    <tr>
      <td>真实姓名(不能为空 ,没有其他要求)</td>
      <td><input type="text" id="realname" name="realname"/>
      </td>
    </tr>
    <tr>
      <td>登录名(登录名不能为空,长度应该在5-8之间:</td>
      <td><input type="text" id="username" name="username"/></td>
    </tr>
    <tr>
      <td>密码(不能为空,长度6-12之间):</td>
      <td><input type="password" id="pwd" name="pwd"/></td>
    </tr>
    <tr>
      <td>重复密码密码(不能为空,长度6-12之间):</td>
      <td><input type="password" id="pwd2" name="pwd2"/></td>
    </tr>
    <tr>
      <td>性别(必选其一)</td>
      <td>
        <input type="radio" id="male" value="m" name="sex"/>男
        <input type="radio" id="female" value="f" name="sex"/>女
        <!--这里设置表单校验错误信息的显示位置-->
        <label class="error" for="sex"></label>
      </td>
    </tr>
    <tr>
      <td>年龄(必填26-50):</td>
      <td><input type="text" id="age" name="age"/></td>
    </tr>
    <tr>
      <td>你的学历:</td>
      <td>
        <select name="edu" id="edu">
          <option value="">-请选择你的学历-</option>
          <option value="a">专科</option>
          <option value="b">本科</option>
          <option value="c">研究生</option>
          <option value="e">硕士</option>
          <option value="d">博士</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>兴趣爱好:</td>
      <td colspan="2">
        <input type="checkbox" name="hobby" id="pp" value="0"/>乒乓球
        <input type="checkbox" name="hobby" id="ym" value="1"/>羽毛球
        <input type="checkbox" name="hobby" id="sw" value="2"/>上网
        <input type="checkbox" name="hobby" id="ly" value="3"/>旅游
        <input type="checkbox" name="hobby" id="gw" value="4"/>购物
      </td>
    </tr>
    <tr>
      <td align="left">电子邮箱(格式正确):</td>
      <td><input type="text" id="email" name="email"/></td>
    </tr>
    <tr>
      <td align="left">身份证(15-18,格式正确):</td>
      <td><input type="text" id="idcard" name="idcard"/></td>
    </tr>
    <tr>
      <td align="left">手机号(格式正确):</td>
      <td><input type="text" id="phone" name="phone"/></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" id="smtBtn" value="保存"></td>
    </tr>
  </table>
</form>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/jquery.validate.min.js"></script>
<script>
 /*页面加载完成后,开启表单验证的功能,这样每输入一个就会及时校验一个*/
 $().ready(function () {
   /*校验表单项*/
   $("#empForm").validate({
     rules: {
       realname: {
         required: true
       },
       username: {
         required: true,
         rangelength: [5, 8]
       },
       pwd: {
         required: true,
         rangelength: [6, 12]
       },
       pwd2: {
         required: true,
         rangelength: [6, 12],
         /*重复密码需要与原密码相同的要求*/
         equalTo: "#pwd"
       },
       sex: {
         required: true
       },
       age: {
         required: true,
         range: [26, 50]
       },
       email: {
         email: true
       },
       idcard: {
         card: true
       },
       phone: {
         phone: true
       }
     },
     messages: {
       realname: {
         required: "真实姓名不能为空"
       },
       username: {
         required: "登录名不能为空",
         rangelength: "登录名长度要在5-8位之间"
       },
       pwd: {
         required: "密码不能为空",
         rangelength: "密码长度在6-12位之间"
       },
       pwd2: {
         required: "重复密码不能为空",
         rangelength: "重复密码长度在6-12位之间",
         equalTo: "重复密码与密码不一致"
       },
       sex: {
         required: "请选择性别"
       },
       age: {
         required: "年龄不能为空",
         range: "年龄必须在26-50岁之间"
       },
       email: {
         email: "请输入有效邮箱"
       },
       idcard: {
         card: "请输入有效身份证号"
       },
       phone: {
         phone: "请输入有效手机号"
       }
     }
   });
 });
 
 /*身份证格式验证*/
 $.validator.addMethod("card", function (value, element, params) {
   var reg = /^\d{15}(\d{2}[\dX])?$/i;
   return reg.test(value);
 }, "idcard error");
 
 
 /*手机号格式验证*/
 $.validator.addMethod("phone", function (value, element, params) {
   var reg = /^1[34578]\d{9}$/;
   return reg.test(value);
 }, "phone error");
</script>
</body>
</html>

四.validate表单校验常用规则

jQuery中使用validate插件校验表单功能

总结

以上所述是小编给大家介绍的jQuery中使用validate插件校验表单功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现滚动效果
Nov 17 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
jquery+php后台实现省市区联动功能示例
May 23 #jQuery
jQuery Migrate 插件用法实例详解
May 22 #jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 #jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 #jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 #jQuery
Vue项目中使用jquery的简单方法
May 16 #jQuery
You might like
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
domReady的实现案例
2016/11/23 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
使用python装饰器验证配置文件示例
2014/02/24 Python
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python的argparse库使用详解
2018/10/09 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python基于WordCloud制作词云图
2019/11/29 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
Wallis官网:英国女装零售商
2020/01/21 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
人口与计划生育目标管理责任书
2014/07/29 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
装修公司管理制度
2015/08/05 职场文书
2015团员个人年度总结
2015/11/24 职场文书