使用JQuery验证表单

原文链接： http://dev.mjxy.cn/a-Form-validation-using-JQuery.aspx

$(document).ready(function () {

002

003	/* 设置默认属性 */

004	$.validator.setDefaults({

005	submitHandler: function (form) { form.submit(); }

006

});

007	// 中文字两个字节

008	jQuery.validator.addMethod("byteRangeLength", function (value, element, param) {

009	var length = value.length;

010	for (var i = 0; i < value.length; i++) {

011	if (value.charCodeAt(i) > 127) {

012

length++;

013

}

014

}

015	return this.optional(element) || (length >= param[0] && length <= param[1]);

016	}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");

017

018	/* 追加自定义验证方法 */

019	// 身份证号码验证

020	jQuery.validator.addMethod("isIdCardNo", function (value, element) {

021	return this.optional(element) || isIdCardNo(value);

022	}, "请正确输入您的身份证号码");

023

024

// 字符验证

025	jQuery.validator.addMethod("userName", function (value, element) {

026	return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);

027	}, "用户名只能包括中文字、英文字母、数字和下划线");

028

029

// 手机号码验证

030	jQuery.validator.addMethod("isMobile", function (value, element) {

031	var length = value.length;

032	return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));

033	}, "请正确填写您的手机号码");

034

035

// 电话号码验证

036	jQuery.validator.addMethod("isPhone", function (value, element) {

037	var tel = /^(\d{3,4}-?)?\d{7,9}$/g;

038	return this.optional(element) || (tel.test(value));

039	}, "请正确填写您的电话号码");

040

041

// 邮政编码验证

042	jQuery.validator.addMethod("isZipCode", function (value, element) {

043	var tel = /^[0-9]{6}$/;

044	return this.optional(element) || (tel.test(value));

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

046	$(regFrom).validate({

047	/* 设置验证规则 */

048

rules: {

049	userName: {

050	required: true,

051	userName: true,

052	byteRangeLength: [3, 15]

053

},

054	password: {

055	required: true,

056	minLength: 5

057

},

058	repassword: {

059	required: true,

060	minLength: 5,

061	equalTo: "#password"

062

},

063	question: {

064	required: true

065

},

066

answer: {

067	required: true

068

},

069	realName: {

070	required: true

071

},

072	cardNumber: {

073	isIdCardNo: true

074

},

075	mobilePhone: {

076	isMobile: true

077

},

078

phone: {

079	isPhone: true

080

},

081

email: {

082	required: true,

083	email: true

084

},

085	zipCode: {

086	isZipCode: true

087

}

088

},

089	/* 设置错误信息 */

090	messages: {

091	userName: {

092	required: "请填写用户名",

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

094

},

095	password: {

096	required: "请填写密码",

097	minlength: jQuery.format("输入{0}.")

098

},

099	repassword: {

100	required: "请填写确认密码",

101	equalTo: "两次密码输入不相同"

102

},

103	question: {

104	required: "请填写您的密码提示问题"

105

},

106

answer: {

107	required: "请填写您的密码提示答案"

108

},

109	realName: {

110	required: "请填写您的真实姓名"

111

},

112

email: {

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

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

115

}

116

},

117	/* 错误信息的显示位置 */

118	errorPlacement: function (error, element) {

119	error.appendTo(element.parent());

120

},

121	/* 验证通过时的处理 */

122	success: function (label) {

123	// set   as text for IE

124	label.html(" ").addClass("checked");

125

},

126	/* 获得焦点时不验证 */

127	focusInvalid: false,

128	onkeyup: false

129

});

130

131	// 输入框获得焦点时，样式设置

132	$('input').focus(function () {

133	if ($(this).is(":text") || $(this).is(":password"))

134	$(this).addClass('focus');

135	if ($(this).hasClass('have_tooltip')) {

136	$(this).parent().parent().removeClass('field_normal').addClass('field_focus');

137

}

138

});

139

140	// 输入框失去焦点时，样式设置

141	$('input').blur(function () {

142	$(this).removeClass('focus');

143	if ($(this).hasClass('have_tooltip')) {

144	$(this).parent().parent().removeClass('field_focus').addClass('field_normal');

145

}

146

});

147

});