jQuery表单校验插件validator使用方法详解


Posted in jQuery onFebruary 18, 2020

validator插件:将jquery实现的常用操作进行封装,我们只需要学会插件的使用语法,就可以使用简单的代码实现较为复杂的功能。

validator的基本使用

1. 需要引入的文件

① jQuery类库

② 插件的js文件 官网

2.表单校验插件validator的基本语法

在rules中通过校验规则名称使用校验规则 ,在messages中定义该规则对应的错误提示信息。

<!-- 需要引入的文件 --> 
<script src="../lib/jquery.js"></script>
<script src="../dist/jquery.validate.js"></script>

<!-- 表单校验插件validator的基本语法 -->
<script>
 $("form表单的选择器").validate({
 rules:{//配置表单项校验的规则
 表单项的name:{
 校验规则名称: 规则值,
 ...
 校验规则名称: 规则值
 },
 ...,
 表单项的name:{
 校验规则名称: 规则值,
 ...
 校验规则名称: 规则值
 }
 },
 messages:{//配置对应的表单项校验失败后的错误提示信息
 表单项的name:{
 校验规则名称: "提示信息",
 ...
 校验规则名称: "提示信息"
 },
 ...,
 表单项的name:{
 校验规则名称: "提示信息",
 ...
 校验规则名称: "提示信息"
 }
 }
 });
</script>

常用的校验规则名称,规则值及使用范围:

jQuery表单校验插件validator使用方法详解

注:$(“form表单的选择器”)即表单jQuery对象。

扩展:当错误提示信息不按照我们预想的位置显示时,我们可以自定义错误显示标签放在我们需要显示的位置。

语法:

//标签写在什么地方,错误信息就显示在什么地方
<label class="error" for="表单项的name"></label>

3. 自定义校验方法

如果预定义的校验规则不能满足需求则可以进行自定义校验规则。

自定义校验语法:

$.validator.addMethod("校验规则名称",function(value, element, params){
 //value:要校验的值(校验组件的value值)
 //element:要校验的表单项标签对象
 //params:使用此规则时,配置的规则的值。(校验规则的参数)
 //如果校验通过,就返回true;否则返回false
}, "默认效验错误时的提示信息");

validator表单校验的简单示例

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>

 <style type="text/css">
 table {
 width: 30%;
 
 /* 居中 */
 /* margin: 0 auto; */
 
 /* magin:atuo配合绝对定位实现水平和垂直方向居中 */
 margin:auto;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 
 }
 td {
 padding: 8px 2px; 
 }
 
 .error {
 color: red;
 }
 </style>
 </head>

 <body>
 <form name="empForm" id="empForm" method="get" action="#">
 <table>
 <tr>
 <td>用户名</td>
 <td><input type="text" id="username" name="username" /></td>
 </tr>
 
 <tr>
 <td>密码</td>
 <td><input type="password" id="pwd" name="pwd" /></td>
 </tr>
 
 <tr>
 <td>确认密码</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>年龄</td>
 <td><input type="text" id="age" name="age" /></td>
 </tr>
 
 <tr>
 <td align="left">电子邮箱:</td>
 <td><input type="text" id="email" name="email" /></td>
 </tr>
 
 <tr>
 <td align="left">身份证:</td>
 <td><input type="text" id="idcard" name="idcard" /></td>
 </tr>
 
 <tr>
 <td>学历</td>
 <td>
 <select name="edu" id="edu">
 <option value="">-请选择你的学历-</option>
 <option value="a">学前</option>
 <option value="a">小学</option>
 <option value="a">初中</option>
 <option value="a">高中</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="coding" value="0" />编程
 <input type="checkbox" name="hobby" id="read" value="1" />看书
 <input type="checkbox" name="hobby" id="ball" value="2" />打球
 <label class="error" for="hobby"></label>
 </td>
 </tr>
 
 <tr>
 <td></td>
 <td><input type="submit" id="smtBtn" value="确定"></td>
 </tr>
 </table>
 </form>
 
 
 <!-- 引入jQuery类库 -->
 <script src="js/jquery-3.3.1.js"></script>
 <!-- 引入validator插件 -->
 <script src="js/jquery.validate.min.js"></script>
 
 <script>
 $("#empForm").validate({
 rules:{//配置表单项校验的规则
 username:{
 required: true,
 maxlength:5,
 },
 pwd:{
 required: true,
 rangelength:[6,10]
 },
 pwd2:{
 required:true,
 rangelength:[6, 10],
 equalTo:"#pwd"
 },
 sex:{
 required:true
 },
 age:{
 required:true,
 range:[18, 70],
 digits:true
 },
 email:{
 required:true,
 email:true
 },
 idcard:{
 required:true,
 card:true
 },
 edu:{
 required:true
 },
 hobby:{
 required:true
 }, 
 },
 messages:{//配置对应的表单项校验失败后的错误提示信息
 username:{
 required: "请输入用户名",
 maxlength:"用户名不得多于5位"
 },
 pwd:{
 required: "请输入密码",
 rangelength:"密码必须是6~10位"
 },
 pwd2:{
 required:"确认密码不能为空",
 rangelength:"确认密码必须是6~10位",
 equalTo:"两次密码输入不一致"
 },
 sex:{
 required:"性别必选"
 },
 age:{
 required:"年龄不能为空",
 range:"年龄必须是18~70岁之间",
 digits:"年龄必须是整数"
 },
 email:{
 required:"邮箱不能为空",
 email:"邮箱格式不正确"
 },
 idcard:{
 required:"身份证号不能为空",
 card:"身份证号格式不正确"//自定义身份证校验方法中有错误时提示信息,这里写了,会显示这里的
 },
 edu:{
 required:"学历必选"
 },
 hobby:{
 required:"兴趣爱好必选"
 } 
 }
 })
 
 //自定义身份证校验方法
 $.validator.addMethod("card",function(value, element, params){
 //value:要校验的值(校验组件的value值)
 //element:要校验的表单项标签对象
 //params:使用此规则时,配置的规则的值。(校验规则的参数)
 
 //如果校验通过,就返回true;否则返回false
 
 // 身份证格式:15位数字, 18位数字, 17位数字+X
 var reg = /^\d{15}(\d{2}[\dx])?$/i;//简单的身份证校验正则表达式
 var result = reg.test(value);
 return result;
 },"请输入正确的身份证号");
 </script> 
 </body>
</html>

jQuery表单校验插件validator使用方法详解

本文已被整理到了《jquery表单验证大全》 ,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
jQuery实现简易QQ聊天框
Feb 10 #jQuery
jQuery实现简单聊天室
Feb 08 #jQuery
jquery实现点击弹出对话框
Feb 08 #jQuery
jQuery实现简易聊天框
Feb 08 #jQuery
jquery添加div实现消息聊天框
Feb 08 #jQuery
jQuery实现聊天对话框
Feb 08 #jQuery
You might like
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
js中事件对象和事件委托的介绍
2019/01/21 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
复习Python中的字符串知识点
2015/04/14 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
django中的图片验证码功能
2019/09/18 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
Python日志器使用方法及原理解析
2020/09/27 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
幼师自荐信范文
2013/10/06 职场文书
电子商务专业个人的自我评价
2013/11/19 职场文书
课外访万家心得体会
2014/09/03 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS