下载：
下载validatation插件地址：jqueryvalidation.org/；这里需要注意的是validation验证插件有依赖于JQuery的，所以连同JQuery也要一起放置到项目中。
使用：
简单配置：
使用的时候很简单，首先如果我们使用环境为中文，可以自定义中文提示信息（也可以另存为文件）：如下代码：
/**
* Created by Administrator on 2017/6/14.
*/
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );
} else {
factory( jQuery );
}
}(function( $ ) {
/*
* Translated default messages for the jQuery validation plugin.
* Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
*/
$.extend($.validator.messages, {
required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
});
}));入门使用：
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>validate</title>
</head>
<body>
<form id="formID" action="">
<legend>用户注册</legend>
<label for="username">用户名:</label>
<input type="text" name="username" id="username">
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password">
</p>
<p>
<input type="submit" value="注册">
</p>
</form>
</body>
<script src="jquery.js" type="application/javascript"></script>
<script src="validate.js" type="application/javascript"></script>
<script src="validate_cn.js" type="application/javascript"></script>
<script>
$(function () {
$('#formID').validate({
debug:true,
rules:{
username:{
required:true,
minlength:2,
maxlength:10
},
password:{
required:true,
minlength:2,
maxlength:12
}
}
})
})
</script>
</html>
显示效果：
自定义校验规则：
自定义校验规则我们使用需要使用$.validator.addMethod完成。简单实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>validate</title>
</head>
<body>
<form id="formID" action="">
<legend>用户注册</legend>
<label for="username">用户名:</label>
<input type="text" name="username" id="username">
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password">
</p>
<p>
<input type="submit" value="注册">
</p>
</form>
</body>
<script src="jquery.js" type="application/javascript"></script>
<script src="validate.js" type="application/javascript"></script>
<script src="validate_cn.js" type="application/javascript"></script>
<script>
$(function () {
$('#formID').validate({
debug:true,
rules:{
username:{
required:true,
phone:true
},
password:{
required:true,
minlength:2,
maxlength:12
}
}
}),
/*
*自定义校验规则
*phone 要验证规则名称
* func 校验处理
* value 获取输入的值
* Element 当前的文本框
*params 校验参数
* */
$.validator.addMethod('phone',function (value,element,params) {
/*手机的正则匹配*/
var phone =/^1[3578]\d{9}$/;
return this.optional(element)||(phone.test(value));
},'请填写正确的手机号码！')
})
</script>
</html>
远程校验：
remote用法：
1、remote使用get请求访问服务器
访问服务器后返回校验结果：正常的时候返回true，检验不通过的时候返回错误提示信息
remote:url
2、remote使用post请求访问服务器
remote:{
url:请求地址
type：请求类型post/get
data:{
需要传递的参数
}
}
<script>
$(function () {
$('#formID').validate({
debug:true,
rules:{
username:{
required:true,
/*远程的校验*/
/*remote:"check.php"*/
remote:{
url:"check.php",
type:"post",
data:{
xxx:xxx
}
}
},
password:{
required:true,
minlength:2,
maxlength:12
}
}
}),radio、checkbox、select的验证
.radio的required表示必须选中一个
<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input type="radio" id="gender_female" value="f" name="gender"/>
checkbox的required表示必须选中
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />
checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间
<input type="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" id="spam_mail" value="mail" name="spam[]" />
select的required表示选中的value不能为空
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
<option value=""></option>
<option value="1">Buga</option>
<option value="2">Baga</option>
<option value="3">Oi</option>
</select>
select的minlength表示选中的最小个数（可多选的select）,maxlength表示最大的选中个 数,rangelength:[2,3]表示选中个数区间
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
<option value="b">Banana</option>
<option value="a">Apple</option>
<option value="p">Peach</option>
<option value="t">Turtle</option>
</select>
时间： 2024-08-31 18:12:39