强大的jquery验证框架

最新推荐文章于 2022-09-20 08:40:08 发布

free0006

最新推荐文章于 2022-09-20 08:40:08 发布

阅读量341

点赞数

分类专栏： javascript 文章标签： javascript 前端 ViewUI

本文链接：https://blog.csdn.net/free0006/article/details/84391258

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jquery的验证太强大了，很容易就可以上手了，长度，必填，自定义检验，都可以很方便
以下是一些数据的正则和脚本

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>validate.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.js"></script>
<script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script>
</head>
<body>
<form action="" id="myForm">
<input id="userName" name="userName" /><em>*</em>
<input id="age" name="age"/><em>*</em>
<input id="birthday" name="birthday"/><em>*</em>
<input id="tel" name="tel"/><em>*</em>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
$().ready(function() {
initValidate();
});
jQuery.validator.addMethod("istel", function(value, element) {
var decimal = /^-?\d+(\.\d{1,2})?$/;
return this.optional(element) || (fucCheckTEL(value));
}, $.validator.format("不合法的电话号码!"));
//电话号码
function fucCheckTEL(TEL)
{
var i,j,strTemp;
strTemp="0123456789-()# ";
for (i=0;i<TEL.length;i++)
{
j=strTemp.indexOf(TEL.charAt(i));
if (j==-1)
{
//说明有字符不合法
return false;
}
}
//说明合法
return true;
}
function initValidate() {
$("#myForm").validate({
rules : {
'userName': {
"required" : true,
"minlength":10
},
'age' : {
"required" : true
},
'birthday' : {
"required" : true
},
'tel' : {
"required" : true,
"istel":true
}
}
});
}
</script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>validate.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.js"></script>
    <script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script>
  </head>
<body>
	<form action="" id="myForm">
		<input id="userName" name="userName" /><em>*</em>
		<input id="age" name="age"/><em>*</em>
		<input id="birthday" name="birthday"/><em>*</em>
		<input id="tel" name="tel"/><em>*</em>
		<input type="submit" value="提交" />
	</form>
	
	<script type="text/javascript">
	
	$().ready(function() {
          initValidate();
	});
	
	jQuery.validator.addMethod("istel", function(value, element) {
	   var decimal = /^-?\d+(\.\d{1,2})?$/;
	   return this.optional(element) || (fucCheckTEL(value));
	  }, $.validator.format("不合法的电话号码!")); 
				  
	//电话号码
	function fucCheckTEL(TEL)     
	{     
		var i,j,strTemp;     
		strTemp="0123456789-()# ";     
		for (i=0;i<TEL.length;i++)     
		{     
			j=strTemp.indexOf(TEL.charAt(i));     
			if (j==-1)     
			{     
				//说明有字符不合法     
				return false;     
			}     
		}     
		//说明合法     
		return true;     
	} 
				  
	function initValidate() {
		$("#myForm").validate({
		rules : {
				'userName': {
					"required" : true,
					"minlength":10
				},
				'age' : {
					"required" : true
				},
				'birthday' : {
					"required" : true
				},
				'tel' : {
					"required" : true,
					"istel":true
				}
			}
		});
	}
	</script>
</body>
</html>

别人写的一个强大的检测

Html代码

$(document).ready(function(){
/* 设置默认属性 */
$.validator.setDefaults({
submitHandler: function(form) { form.submit(); }
});
// 中文字两个字节
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("userName", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "用户名只能包括中文字、英文字母、数字和下划线");
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));
}, "请正确填写您的手机号码");
// 电话号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
$(regFrom).validate({
/* 设置验证规则 */
rules: {
userName: {
required: true,
userName: true,
byteRangeLength: [3,15]
},
password: {
required: true,
minLength: 5
},
repassword: {
required: true,
minLength: 5,
equalTo: "#password"
},
question: {
required: true
},
answer: {
required: true
},
realName: {
required: true
},
cardNumber: {
isIdCardNo: true
},
mobilePhone: {
isMobile: true
},
phone: {
isPhone: true
},
email: {
required: true,
email: true
},
zipCode: {
isZipCode:true
}
},
/* 设置错误信息 */
messages: {
userName: {
required: "请填写用户名",
byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
},
password: {
required: "请填写密码",
minlength: jQuery.format("输入{0}.")
},
repassword: {
required: "请填写确认密码",
equalTo: "两次密码输入不相同"
},
question: {
required: "请填写您的密码提示问题"
},
answer: {
required: "请填写您的密码提示答案"
},
realName: {
required: "请填写您的真实姓名"
},
email: {
required: "请输入一个Email地址",
email: "请输入一个有效的Email地址"
}
},
/* 错误信息的显示位置 */
errorPlacement: function(error, element) {
error.appendTo( element.parent() );
},
/* 验证通过时的处理 */
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
},
/* 获得焦点时不验证 */
focusInvalid: false,
onkeyup: false
});
// 输入框获得焦点时，样式设置
$('input').focus(function(){
if($(this).is(":text") || $(this).is(":password"))
$(this).addClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_normal').addClass('field_focus');
}
});
// 输入框失去焦点时，样式设置
$('input').blur(function() {
$(this).removeClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_focus').addClass('field_normal');
}
});
});
jQuery.validator.addMethod("decimal", function(value, element) {
var decimal = /^-?\d+(\.\d{1,2})?$/;
return this.optional(element) || (decimal.test(value));
}, $.validator.format("小数位数不能超过两位!"));
//自定义验证方法检查长度小于等于100
jQuery.validator
.addMethod("MaxLength100",
function(value, element) {
$(element).blur(function() {
$(element).val($.trim($(element).val()));
});
var length = value.replace(/[^\x00-\xff]/g,"**").length;
return this.optional(element)|| (length <= 100);
}, "请输入一个长度最多是 100 的字符串");