jQuery Validate之自定义(正则)校验
一、前言
相信很多开发的小伙伴都用过 jQuery Validate插件，该插件为表单提供了强大的验证功能，简单实用便于维护。
今天呢，在这里解锁下 jQuery Validate插件的 自定义校验 (eg：<正则 / 业务参数>校验)。
如有想看如何使用jQuery Validate插件的小伙伴，请前往以下链接：
在此记录一下，分享给大家。
二、自定义校验
// 顺手验证了下，三种方式是一样的，选其一即可(并无优先级之分，加载顺序自上而下)
// $(document).ready(function() {
// $(function() {
$().ready(function() {
// 1、初始化函数<编程习惯> eg:click事件..
initForm();
// 2、form表单 - 基础校验
validateForm();
// 3、form表单 - 自定义校验(正则表达式/业务参数校验/..)
customValidate();
});
/**
* 1、初始化函数 eg:click事件等..
*/
function initForm(){
$("#btn_prod_submit").click(function() {
$("#prodForm").submit();
});
// ... 此处较为基础，省略...
}
/**
* 2、form表单 - 基础数据校验
* flagSubmit：防止表单重复提交标识
*/
var flagSubmit = true;
function validateForm(){
// 校验
if(!$("#prodForm").length > 0)
return;
if(!$("#prodForm").html())
return;
$("#prodForm").validate({
// 是否验证后提交表单 true:只验证不提交表单
debug: false,
// 错误信息显示的位置
errorPlacement: function(error, element) {
// 将错误信息放在验证的元素后面
error.appendTo(element.parent());
// 自定义显示样式
error.css("color", "#ff0000");
},
// 验证成功后提交表单
submitHandler: function(form) {
if(prodFormAjax){
// 置为false,防止重复提交表单
prodFormAjax = false;
form.submit();
}
},
// 校验规则
rules: {
name: {
required: true, // 必填校验
maxlength:255 // max长度校验
},
initPrice: {
required: true,
number:true,
max:99999999.99, // 值大小校验
maxlength:11
},
stock: {
number:true, // 合法数据校验
range:[-1,999999999], // 值所在区域校验
checkStock:true // 自定义校验(customValidate())
},
casNo: {
checkCasNo:true // 自定义校验(customValidate())
}
},
// 校验提示信息
messages: {
name: {
required: '请填写商品名称',
maxlength: '商品名称长度不能超过255个字符'
},
initPrice:{
required: '请填写商品价格',
number:'商品价格必须是数字',
max:'商品价格最大不能超过99999999.99',
maxlength:'商品价格不能超过十位'
},
stock:{
number:'商品库存必须是数字',
range:'商品库存为-1~999999999整数',
// 自定义校验已有错误信息，此处可省略(写的话，会覆盖)
checkStock:'请输入整数'
},
// 自定义校验已有错误信息，此处可省略
// casNo: {
// ...
// }
}
});
}
/**
* 3、form表单 - 自定义校验(正则表达式/业务参数校验/..)
*/
function customValidate(){
// 库存为整数(正则)
$.validator.addMethod("checkStock", function(value, elements){
var patternStock= /^[+-]?[1-9]?[0-9]*\.[0-9]*$/;
return !patternStock.test(value);
}, "请输入整数");
// casNo格式校验(正则)
$.validator.addMethod("checkCasNo",function(value, element){
var patternCasNo = /^\d{2,7}-\d{2}-\d{1}$/;
return this.optional(element) || (patternCasNo.test(value));
},"CAS号格式有误");
}
// 知识点：
this.optional(element)：可以理解为 - 标识校验元素前提不为空时，才会校验
本质原因：当校验元素为空时,return(this.optional(element))的结果为dependency-mismatch,不为false故不会弹出错误信息
Now ~ ~ ~写到这里，就写完了，如果有幸帮助到你，请记得关注我，共同一起见证我们的成长。
