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);
}, "文件太大");