一、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>
<!--suppress XmlInvalidId -->
<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"/>&nbsp;男&nbsp;&nbsp;<input  type="radio" id="gender_female" value="f" name="gender"/>&nbsp;女<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"/>&nbsp;乒乓球 &nbsp;<input type="checkbox" name="checkbox1" id="qq2" value="1" />&nbsp;羽毛球 &nbsp;<input type="checkbox" name="checkbox1" id="qq3" value="2" />&nbsp;上网 &nbsp;<input type="checkbox" name="checkbox1" id="qq4" value="3" />&nbsp;旅游 &nbsp;<input type="checkbox" name="checkbox1" id="qq5" value="4" />&nbsp;购物 &nbsp;<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>

Jquery插件入门之Validate插件的简单使用相关推荐

Jquery中使用Validate插件使表单验证更加简单
场景效果介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 UR ...
jQuery的Validate插件
Validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 该插件捆绑了一套有用的验证方法,包括URL和电子邮件验证,同时提供了一个 ...
jQuery validate插件submitHandler提交导致死循环解决方法
作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1511.html dom对像的提交form.submit();和jquery对像的提交$('').submit() ...
（转）jquery.validate插件的使用
JQuery Validate使用总结: 一.导入js库 <script src="../js/jquery.js" type="text/javascript&q ...
html下拉菜单插件,简单的jQuery大型下拉菜单插件
booNavigation是一款简单的jQuery大型下拉菜单插件.通过该插件可以制作3列大型下拉菜单,并带有平滑过渡效果,以及鼠标滑过菜单项时的动画效果. 使用方法在页面中引入jquery和boo ...
validate插件深入学习-01 小白从看透一个插件开始
没有编程基础的的我,即使看了一遍jq文档也不知道怎么写程序,一个新的插件看了也不知道怎么用. 总是想做自己会的,自己不会的永远不去触碰,就永远不会. 都说编程这东西,很多都有很像的地方了,一个语言学通 ...
jQuery超炫酷按钮插件及源码
现在大部分网页的按钮都是经过美化的,那些原始的浏览器按钮太过于枯燥乏味,让用户失去和网站交互的兴趣.早期我们都是通过背景图片来美化网页按钮,而现在我们可以利用扩展性更好的CSS3来制作漂亮的网页按钮, ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
jquery插件---自动补全类插件
jquery插件---自动补全类插件 (1)AutoComplete-JQuery jQuery插件易于集成到现在的表单中(Form). (2)Facebook like Autocomplete 基 ...

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

一、jQuery插件

1.jQuery插件概述

2.Validate插件

Jquery插件入门之Validate插件的简单使用相关推荐

最新文章

热门文章