jQuery Validate 插件 验证基本使用方法及注意事项详解（代码实例）
程序员文章站
2022-03-23 19:07:57
jquery validation.js 验证使用方法实例
1、修改错误信息位置的方法。
errorplacement: function(error, element){...
jquery validation.js 验证使用方法实例
1、修改错误信息位置的方法。
errorplacement: function(error, element){
error.appendto(element.parents("td"));
},
2、修改错误信息的标签
errorelement: "span",
3、修改正确信息
success: function(element) {
//正确时的样式
element.text("正确").addclass("success");
},
4、添加自定义验证方法
例如：
//手机号码验证
jquery.validator.addmethod("ismobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
以下为完整实例
<!doctype html>
<html chartset='utf-8'>
<head>
<title>validate验证</title>
<script src="jquery.min.js"></script>
<script src="jquery.validate.min.js"></script>
<style type="text/css">
#register{width: 500px;margin:0 auto;margin-top: 60px;}
td{font-size: 14px;}
input{width: 260px;height: 30px;border: 1px solid #ccc;padding-left: 6px;}
button{width: 266px;height: 32px;line-height: 32px;background: #3e84d7;border: none;color: #fff;}
.error{color: red;}
input.error{border-color: red;color: #333;}
</style>
</head>
<body>
<p id='register'>
<form id='myform'>
<table>
<tr>
<td><p><input type="text" name="username" placeholder="用户名"></p></td>
</tr>
<tr>
<td><p><input type="text" id="password" name="password" placeholder="密码"></p></td>
</tr>
<tr>
<td><p><input type="text" name="passwordagain" placeholder="确认密码"></p></td>
</tr>
<tr>
<td><p><input type="text" name="name" placeholder="联系人"></p></td>
</tr>
<tr>
<td><p><input type="text" name="corpname" placeholder="公司名称"></p></td>
</tr>
<tr>
<td><p><input type="text" name="sms" placeholder="手机号"></p></td>
</tr>
<tr>
<td><p><input type="text" name="usercode" placeholder="手机验证码"></p></td>
</tr>
<tr>
<td><p><button type="submit">注册</button></p></td>
</tr>
</table>
</form>
</p>
<script>
$(function(){
//调用验证方法
initvalidator();
});
/**
* base代表异步请求的链接
*/
function initvalidator(base){
$("#myform").validate({
submithandler: function(form) {
//验证通过调用此方法
alert(1);
} ,
//设置验证规则
rules: {
/*
*注意，当form表单中name的名字有特殊符号时，需要用双引号包裹用户名
*例如： input name=user.name时，就需要用""
*/
"username": {
required: true
},
"password": {
required: true,
rangelength: [6, 12]
},
"passwordagain": {
required: true,
rangelength: [6, 12],
equalto: "#password"//密码对应框的id
},
"corpname": {
required: true
},
"name": {
required: true
},
"sms": {
required: true,
ismobile: true,
checksms: true
},
"usercode": {
required: true,
checkcode:true
}
},
//设置错误信息
messages: {
"username": {
required: "请输入用户名"
},
"password": {
required: "请输入密码",
rangelength: "密码长度为6-12位"
},
"passwordagain": {
required: "请再次输入密码",
rangelength: "密码长度为6-12位",
equalto: "两次输入密码不相同"
},
"corpname": {
required: "请输入公司名称"
},
"name": {
required: "请输入联系人"
},
"sms": {
required: "请输入手机号码",
ismobile: "请输入有效的手机号码",
checksms: "手机号码已经存在"
},
"usercode": {
required: "请输入验证码",
checkcode:"验证码不正确"
}
},
//修改错误信息的位置
errorplacement: function(error, element){
error.appendto(element.parents("td"));
},
//修改错误信息的标签
errorelement: "span",
//修改正确信息
success: function(element) {
//正确时的样式
element.text("正确").addclass("success");
},
});
//异步验证手机号码
jquery.validator.addmethod("checksms", function(value, element){
var result = false;
// 设置同步
$.ajaxsetup({
async: false
});
var param = {
sms: value
};
$.post(base + "/checksms.do", param, function(data){
result = (0 == data);
});
// 恢复异步
$.ajaxsetup({
async: true
});
return result;
}, "手机号码已经存在");
//异步验证验证码
jquery.validator.addmethod("checkcode", function(value, element){
var result = false;
// 设置同步
$.ajaxsetup({
async: false
});
var param = {
usercode: value
};
$.post(base + "/checkcode.do", param, function(data){
result = (1 == data);
});
// 恢复异步
$.ajaxsetup({
async: true
});
return result;
}, "验证码不正确");
};
/*
*自定义验证
*/
jquery.validator.addmethod("stringcheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uffe5\w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");
//中文字两个字节
jquery.validator.addmethod("byterangelength", function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charcodeat(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
//身份证号码验证
jquery.validator.addmethod("isidcardno", function(value, element) {
return this.optional(element) || isidcardno(value);
}, "请正确输入您的身份证号码");
//手机号码验证
jquery.validator.addmethod("ismobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
//电话号码验证
jquery.validator.addmethod("istel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
//联系电话(手机/电话皆可)验证
jquery.validator.addmethod("isphone", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "请正确填写您的联系电话");
//邮政编码验证
jquery.validator.addmethod("iszipcode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
</script>
</body>
</html>