- 首页 > 资讯 > JavaScript > 正文
jQuery Validate 插件 验证基本使用方法及注意事项详解（代码实例）
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>
<div 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>
</div>
<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>
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻