当前位置：首页 >

Jquery插件入门之Validate插件的简单使用

发布时间：2025/3/20 50 豆豆

生活随笔收集整理的这篇文章主要介绍了 Jquery插件入门之Validate插件的简单使用小编觉得挺不错的,现在分享给大家,帮大家做个参考.

一、jQuery插件

1.jQuery插件概述

2.Validate插件

一、jQuery插件

1.jQuery插件概述

jQuery插件机制概述
- jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能.
jQuery插件机制语法
- jQuery.fn.extend(object) 对jQuery对象进行方法扩展
jQuery.fn.extend({"check":function(){return this.each(function (index,ele) {ele.checked = true;});},"自定义方法名称":function () {// 处理对象的逻辑return this.each(function (index,ele) {ele.checked = false;});}});
- jQuery.extend(object) 对jQuery全局进行方法扩展
jQuery.extend({"min":function (i,j) {return i>j?j:i;},"max":function (i,j) {return i>j?i:j;} });

2.Validate插件

作用:对表单进行校验
下载: 下载路径:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

使用方式:

1.导入jquery.jsvalidate是基于jquery写的,所以要先导入jquery的js文件
2.再导入validate.js想要使用别人的插件就必须的导入人家已经写好的js文件(插件)
3.在页面加载成功后,要确定对页面上的哪个表单进行校验 $(function(){ 表单对象.validate(); });
4.validate使用格式: 表单对象.validate({ rules:{}, //校验规则 messages:{} //提示信息 });

5.常见的校验规则

校验器名称值描述

required	true\|false	必须填写
number	true\|false	只能输入数字
min	数字	最小值
max	数字	最大值
range	[min,max]	取值范围
minlength	数字	最小长度
maxlength	数字	最大长度
rangelength	[minlength,maxlength]	长度范围
equalTo	通过jQuery选择器选中指定元素对象	和谁相等(重复密码)
email	"email"	校验邮箱
date	true	校验日期
dateISO	true	校验日期格式xxxx-xx-xx xxxx/xx/xx

6.rules校验器语法:
- 方式1:单一校验name属性的值:"校验器"
- 方式2:多个校验 name属性的值:{ 校验器1:值1, 校验器2:值2 }
7.messages自定义提示信息语法:
- 方式1:name属性的值:"提示信息"
- 方式2: name属性的值:{ 校验器1:"提示信息1", 校验器2:"提示信息2" }

自定义校验器
- 格式:
  - $.validator.addMethod(name,function(value,element,params){},"message");
  - 参数说明:
    - name:校验器的名称,唯一
    - function:校验规则
      - value:用户输入的值
      - element:要校验的dom对象
      - params:校验器的值
    - message:当不满足校验规则时的提示信息

<!DOCTYPE html>  <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>我的jquery表单校验页面</title><style type="text/css">p{text-align: center;font-size:24px;}table{margin: 0 auto;border: 0;}table tr{height:40px;border:0;}table tr td{padding:0 14px;border:1px solid #999}.error{color:red}</style><script type="text/javascript" src="js/jquery-3.3.1.js"></script><script type="text/javascript" src="js/jquery.validate.min.js"></script><script type="text/javascript">//自定义校验器//校验器的名称为: cardLength//作用: 校验身份证号长度为15位或 18位$.validator.addMethod("cardLength",function (val,ele,params) {if(params){if(val.length==15||val.length==18){return true;}}},"请输入15位或18位的身份证号") $(function(){$("#empForm").validate({rules:{realname:"required",username:{required:true,rangelength:[5,8]},psw:{required:true,rangelength:[6,12]},psw2:{equalTo:"#psw"},gender:{required:true},age:{required:true,number:true,range:[26,50]},edu:{required:true},checkbox1:{required:true},email:{email:"email"},card:{cardLength:true}},messages:{realname:"姓名不能为空",username:{required:"登录名不能为空",rangelength:"登陆名长度为${0}-${1}位"},psw:{required:"密码不能为空",rangelength:"密码长度为${0}-${1}位"},psw2:{equalTo:"密码前后不一致"},gender:{required:"必须其一"},age:{required:"年龄不能为空",number:"年龄必须为数字",range:"年龄必须在${0}到${1}之间"},edu:{required:"学历不能为空"},email:{email:"邮箱格式不对"}}})});</script> </head> <body><p>员工信息录入</p><form name="empForm" id="empForm" method="post" action="test.html"><table border=1><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="psw" name="psw" /></td></tr><tr> <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td><td><input type="password" id="psw2" name="psw2" /></td></tr><tr><td>性别(必选其一)</td><td><input type="radio" id="gender_male" value="m" name="gender"/> 男  <input type="radio" id="gender_female" value="f" name="gender"/> 女<label class="error" for="gender" style="display: none;">必须选择一个性别</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>出生日期(1982/09/21):</td><td><input type="date" id="birthday" name="birthday" value="" /></td></tr><tr> <td>兴趣爱好:</td><td colspan="2"> <input type="checkbox" name="checkbox1" id="qq1"/> 乒乓球  <input type="checkbox" name="checkbox1" id="qq2" value="1" /> 羽毛球  <input type="checkbox" name="checkbox1" id="qq3" value="2" /> 上网  <input type="checkbox" name="checkbox1" id="qq4" value="3" /> 旅游  <input type="checkbox" name="checkbox1" id="qq5" value="4" /> 购物  <label class="error" for="checkbox1" style="display: none;">必须选一个</label></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="card" name="card" /></td></tr><tr><td></td><td><input type="submit" name="firstname" id="firstname" value="保存"></td></tr></table> </form> </body> </html>

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的Jquery插件入门之Validate插件的简单使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇： javascript对象和json字符串
下一篇：通过AOP控制事务的案例