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实现锚点向下平滑滚动特效示例
Aug 29 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
详解jQuery中的easyui
Sep 02 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
9种方法优化jQuery代码详解
Feb 04 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
晶体管来复再生式二管收音机
2021/03/02 无线电
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
基于jquery的无刷新分页技术
2011/06/11 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
jQuery中extend函数简单用法示例
2017/10/11 jQuery
javaScript实现游戏倒计时功能
2018/11/17 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
Python中整数的缓存机制讲解
2019/02/16 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
销售经理工作职责范文
2013/12/03 职场文书
领导证婚人证婚词
2014/01/13 职场文书
小学亲子活动总结
2014/07/01 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
教师听课评语大全
2014/12/31 职场文书
公司人事管理制度
2015/08/05 职场文书
小学班主任教育随笔
2015/08/15 职场文书