目录
一、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插件
-
作用:对表单进行校验
扫描二维码关注公众号，回复： 3723087 查看本文章
-
下载: 下载路径: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"/> 男
<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>