jQuery Validate插件添加自定义验证

jQuery Validate提供的默认验证有时不能满足需求，可以通过添加自定义验证方式完成验证，方式如下：

$.validator.addMethod(rule, function(value, element, param) {...})，

• value：表单的值，文件类型时是文件名
• element：验证的元素
• param：验证规则的值

建议将验证规则写在  additional-methods.js文件中

注：

默认提供的验证规则里有：accept，是对文件的MIME进行验证，使用时需要引入additional-method.js即可使用

accept: 输入拥有合法后缀名的字符串

一.示例

自定义验证上传文件后缀示例（通过文件后缀方式验证）：

1.验证的表单

<form id="myForm" method="post" enctype="multipart/form-data">
	<input type="file" id="upload" name="upload">
</form>

2.js

使用正则去匹配文件名

<script type="text/javascript" src="script/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="script/jquery-validate/messages_zh.min.js"></script>
<script type="text/javascript" src="script/jquery-validate/additional-methods.min.js"></script>

$(function() {
	$.validator.setDefaults({
		submitHandler: function(form) {
			// 处理验证通过
			...
		}
	});
				
	$("#myForm").validate({
		rules: {		
			upload: {
				required: true,
				suffix: "xls,xlsx"
			},
		},
		messages: {
			upload: {
				required: "请选择文件",
				suffix: "不支持的文件类型"
			},	
		}
	});
	
	// 扩展验证（文件后缀)
	$.validator.addMethod("suffix", function(value, element, param) {
		var regStr = '^.+\.(' + param.replace(/,/g, '|') +')$';
		return this.optional(element) || (new RegExp(regStr, 'i').test(value));
	}, "不支持的文件类型");	
});

二.使用accept规则验证文件类型

验证excel类型的文件，accept规则接受的是文件的MIME，多个文件类型使用','隔开

1.js

导入additional-methods.min.js库，其余同上

<script type="text/javascript" src="script/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="script/jquery-validate/messages_zh.min.js"></script>
<script type="text/javascript" src="script/jquery-validate/additional-methods.min.js"></script>
<script type="text/javascript">
	$(function() {
		...
		$("#myForm").validate({
			rules: {
				upload: {
					required: true,
					accept: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
				}
			},
			messages:
				upload: {
					required: "用户不能为空",
					accept: "不支持的文件类型"
				}
			}
		});
	});
</script>

2.注：

(1).excel文件的MIME

• xls：application/vnd.ms-excel
• xlsx：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

(2).word

• doc：application/msword
• docx：application/vnd.openxmlformats-officedocument.wordprocessingml.document

(3).powerpoint

• ppt：application/vnd.ms-powerpoint
• pptx：application/vnd.openxmlformats-officedocument.presentationml.presentation

三.常用验证

// 手机验证
//扩展验证（手机号）
$.validator.addMethod("phone", function(value, element) {
	var phone = /^1(3|4|5|7|8)\d{9}$/;
	return this.optional(element) || (phone.test(value));
}, "请正确输入您的手机号");

// 邮箱验证
$.validator.addMethod("email", function(value, element) {
	var email = /^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i;
	return this.optional(element) || (email.test(value));
}, "请正确填写您的邮箱");

// 邮政编码验证
$.validator.addMethod("postcode", function(value, element) {
	var postcode= /^[1-9]\\d{5}$/;
	return this.optional(element) || (postcode.test(value));
}, "请正确填写您的邮政编码");

// 文件后缀验证（验证规则（多个文件类型以','隔开）： fileSuffix: "xls,xlsx"）
$.validator.addMethod("fileSuffix", function(value, element, params) {
	var regStr = '^.+\.(' + params.replace(/,/g, '|') +')$';
	return this.optional(element) || (new RegExp(regStr, 'i').test(value));
}, "不受支持的文件类型");

// 文件大小验证
$.validator.addMethod("fileMaxSize", function(value, element, params) {
	var fileSize = element.files[0].size;// 文件大小
	return this.optional(element) || (fileSize <= params);
}, "文件太大");