jQuery-Validation范例

来源：互联网发布：arttemplate.js官网编辑：程序博客网时间：2024/05/20 04:12

1.验证操作js:CommonValidator.js

$(document).ready(function(){

/* 设置默认属性 */

$.validator.setDefaults({

submitHandler: function(form) {

form.submit();

}

});

// 字符验证

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));

}, "请正确填写您的邮政编码");

//开始验证

$('#submitForm').validate({

/* 设置验证规则 */

rules: {

username: {

required:true,

stringCheck:true,

byteRangeLength:[3,15]

email:{

required:true,

email:true

phone:{

required:true,

isPhone:true

address:{

required:true,

stringCheck:true,

byteRangeLength:[3,100]

}

/* 设置错误信息 */

messages: {

username: {

required: "请填写用户名",

stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",

byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"

email:{

required: "请输入一个Email地址",

email: "请输入一个有效的Email地址"

phone:{

required: "请输入您的联系电话",

isPhone: "请输入一个有效的联系电话"

address:{

required: "请输入您的联系地址",

stringCheck: "请正确输入您的联系地址",

byteRangeLength: "请详实您的联系地址以便于我们联系您"

}

/* 设置验证触发事件 */

focusInvalid: false,

onkeyup: false,

/* 设置错误信息提示DOM */

errorPlacement: function(error, element) {

error.appendTo( element.parent());

});

2.html 文件：

* {

font-family: Verdana;

font-size: 96%;

}

label {

width: 10em;

float: left;

}

label.error {

float: none;

color: red;

padding-left: .5em;

vertical-align: top;

}

p {

clear: both;

}

.submit {

margin-left: 12em;

}

em {

font-weight: bold;

padding-right: 1em;

vertical-align: top;

}

</style>

</head>

<body>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</p>

</fieldset>

</form>

</body>

</html>

3.demo下载：

http://download.csdn.net/source/3289494

jQuery-Validation范例

1.验证操作js:CommonValidator.js

2.html 文件 ：

2.html 文件：