jquery-validation使用

羊肉小笼包

浏览: 38719 次

最近访客更多访客>>

zihai367

xiexjbailx

zjy_369

java_my_life

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery学习

该前端验证有两种使用方式，一种校验条件写在标签内部的class属性里，另一种是将校验写在js代码中。

第一种方式写在标签中能够很直观的展现表单标签的检验，我觉得对于标签比较多的时候适合使用这种。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>标签的方式验证</title>
	<!--引入js-->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="js/jquery.validate.min.js"></script>
	<!--自定义验证js其中有手机验证和身份证验证-->
	<script src="js/user_defined_validate.js"></script>
	<!--中文提示信息js-->
	<script src="js/message_cn.js"></script>
</head>
<body>
	<form action="#" method="post" id="formT">
	<label>密码：</label>
         <input type="password" name="password" id="password" class="required" /><br />
	<!--必填和邮箱验证-->
	<label>邮箱：</label>
             <input type="text" name="email" id="email" class="required email" /><br />
	<!--手机号验证-->
	<label>手机：</label>
        <input type="text" name="phone" id="phone" class="isPhone" /><br />
	<label>一线城市:</label><br />
	<input type="checkbox" 
               id="shenzhen" name="citys" value="shenzhen" class="required minlength:2" />
	<input type="checkbox" id="shanghai" name="citys" value="上海" />
		<input type="checkbox" id="hangzhou" name="citys" value="hz" />
		<input type="checkbox" id="beijing" name="citys" value="peking" />
		<br />
		<input type="submit" value="提交" />
	</form>
	<script>
		//页面加载后进行验证
		$().ready(function() {
			
			$("#formT").validate({
				//设置表单点击体积submit后不提交
				debug:true
			});
		});
	</script>
</body>

</html>

第二种写在js代码中：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="js/jquery.validate.min.js"></script>
	<script src="js/user_defined_validate.js"></script>
	<script>
		$().ready(function(){
		var validate = $("#formT").validate({
			//调试模式为true会取消submit的默认提交功能
			debug: true,
			//errorClass: "label.error", //默认为错误的样式类为：error 
			//当为false时，验证无效时，没有焦点响应  
			focusInvalid: false,
			onkeyup: false,
			submitHandler: function(form) {
				alert('提交表单！');
				form.submit();
			},
                        //校验规则
			rules: {
				password: {
					required: true,
					rangelength: [4, 10]
				},
				email: {
					required: true,
					email: true
				},
				phone: {
					required: true,
					isPhone:true
				}
				,
				sex:{
					required:true
				}
			},
                        //对应规则给出的提示信息
			messages:{
				password:{
				required: '必填',
			     rangelength:$.validator.format("密码最小长度:{4},最大长度{10}")
				},
				email:{
					required:"必填",
					email:"请输入正确的email格式！"
				},
				phone:{
					required:"必填想",
					isPhone:"请输入正确的手机号！"
				}
				,	
				sex:{
					required:"必填"
				}
			}
		});
		});
	</script>
	<title></title>

</head>

<body>
	<form action="#" method="post" id="formT">
		<label>密码：</label><input type="password" name="password" id="password" />
                 <br />
		<label>邮箱：</label><input type="text" name="email" id="email" /><br />
		<label>手机：</label><input type="text" name="phone" id="phone" /><br />
		<label>性别:</label><br />
		<label>男：</label>
                <input type="checkbox" name="male" id="male" value="sex"/>
		<label>女：</label>
                <input type="checkbox" name="female" id="female" value=""/>
		<br />
		<input type="submit" value="提交" />
	</form>

</body>

</html>

说明文件：默认校验规则：

(1)required:true               必输字段  
(2)remote:"check.php"          使用ajax方法调用check.php验证输入值  
(3)email:true                  必须输入正确格式的电子邮件  
(4)url:true                    必须输入正确格式的网址  
(5)date:true                   必须输入正确格式的日期  
(6)dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 
                               只验证格式，不验证有效性  
(7)number:true                 必须输入合法的数字(负数，小数)  
(8)digits:true                 必须输入整数  
(9)creditcard:                 必须输入合法的信用卡号  
(10)equalTo:"#field"           输入值必须和#field相同  
(11)accept:                    输入拥有合法后缀名的字符串（上传文件的后缀）  
(12)maxlength:5                输入长度最多是5的字符串(汉字算一个字符)  
(13)minlength:10               输入长度最小是10的字符串(汉字算一个字符)  
(14)rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)  
(15)range:[5,10]               输入值必须介于 5 和 10 之间  
(16)max:5                      输入值不能大于5  
(17)min:10                     输入值不能小于10

默认提示：

messages: {  
    required: "This field is required.",  
    remote: "Please fix this field.",  
    email: "Please enter a valid email address.",  
    url: "Please enter a valid URL.",  
    date: "Please enter a valid date.",  
    dateISO: "Please enter a valid date (ISO).",  
    dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",  
    number: "Please enter a valid number.",  
    numberDE: "Bitte geben Sie eine Nummer ein.",  
    digits: "Please enter only digits",  
    creditcard: "Please enter a valid credit card number.",  
    equalTo: "Please enter the same value again.",  
    accept: "Please enter a value with a valid extension.",  
    maxlength: $.validator.format("Please enter no more than {0} characters."),  
    minlength: $.validator.format("Please enter at least {0} characters."),  
    rangelength: $.validator.format("Please enter a value between {0} and {1} 
                                                                        characters long."),  
    range: $.validator.format("Please enter a value between {0} and {1}."),  
    max: $.validator.format("Please enter a value less than or equal to {0}."),  
    min: $.validator.format("Please enter a value greater than or equal to {0}.")  
}

中文默认提示添加js：

jQuery.extend(jQuery.validator.messages, {
        required: "此内容为必填项,请输入！",
		remote: "内容输入错误！",
		email: "E-mail格式错误,请重新输入！",
		url: "网址格式错误,请重新输入！",
		date: "日期格式错误,请重新输入！",
		dateISO: "日期格式错误,请重新输入！",
		number: "请输入合法的数字！",
		digits: "请输入零或正整数！",
		creditcard: "信用卡号格式错误,请重新输入！",
		equalTo: "两次输入不一致,请重新输入！",
		accept: "请输入拥有合法后缀名的字符串！",
		maxlength: jQuery.validator.format("字符串长度不能大于{0}！"),
		minlength: jQuery.validator.format("字符串长度不能小于{0}！"),
		rangelength: jQuery.validator.format("字符串长度只允许在{0}-{1}之间！"),
		range: jQuery.validator.format("输入的数值只允许在{0}-{1}之间！"),
		max: jQuery.validator.format("输入的数值不允许大于{0}！"),
		min: jQuery.validator.format("输入的数值不允许小于{0}！"),
		integer: "请输入合法的整数！",
		positive: "请输入合法的正数！",
		positiveInteger: "请输入合法的正整数！",
		mobile: "手机号码格式错误,请重新输入！",
		phone: "电话号码格式错误,请重新输入！",
		zipCode: "邮政编码格式错误,请重新输入！",
		requiredTo: "此内容为必填项,请输入！",
		username: "只允许包含中文、英文、数字和下划线！",
		prefix: "请输入以 {0} 开头的字符串！",
		lettersonly: "只允许包含字母！"
});

自定义校验js：

//验证手机
jQuery.validator.addMethod("isPhone", function(value, element) {
	var length = value.length;
	var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
	return this.optional(element) || (length == 11 && mobile.test(value));
}, "请填写正确的手机号码"); //可以自定义默认提示信息

实例测试：jqvalidationtest.zip