DWZ框架添加自定义数据验证(手机号码,邮箱,数字等)

前言:
DWZ前端框架,如同其他前端框架一般,都有Coder已经写好了的数据验证的方法,如验证手机号码格式、邮箱格式、日期格式等等。然而在项目过程中,框架给定的验证并不严格或者不符合实际项目中的需要,我们能不能在框架中自定义添加我们自己想要的验证方法呢?答案当然是肯定的。接下来,我将记录如何在DWZ框架中添加自定义的validate(手机号码格式验证)。
因为DWZ自带的手机号码格式验证并不能验证手机号,所以这里我们自己动手写个。
1. 在dwz.validate.method.js 添加验证函数“szztphone”:

$.validator.addMethod("szztphone", function(value, element) {
            return this.optional(element) || /^1[3-9]\d{9}$/.test(value);
        }, "Please specify a valid phone number");

如下图,所示:“1”处为框架自带的验证方法,查看其正则表达式,明显是不能验证手机号码的;“2”处就是我个人添加的方法。
DWZ框架添加自定义数据验证(手机号码,邮箱,数字等)_第1张图片
2. 在dwz.min.js中添加下面的验证函数(细心的可能发现,代码和第一步一样,经验证,两处都要添加该代码,否则不起作用,为什么会这样,不知道,有知道的大佬可告知下)

$.validator.addMethod("szztphone", function(value, element) { return this.optional(element) || /^1[3-9]\d{9}$/.test(value) }, "Please specify a valid phone number");

如图:
DWZ框架添加自定义数据验证(手机号码,邮箱,数字等)_第2张图片
3. 在dwz.regional.zh.js中添加默认错误提示:“必须是手机”。
如下图所示:
DWZ框架添加自定义数据验证(手机号码,邮箱,数字等)_第3张图片
4. 上面3步就是添加完毕了,这里看我们如何在HTML代码中使用:
如下图所示,在input标签的class里面添加我们新加的“szztphone”的class,就可以使用了:
DWZ框架添加自定义数据验证(手机号码,邮箱,数字等)_第4张图片
5. 效果如下图,输入错误的号码就会自动提示报错:
DWZ框架添加自定义数据验证(手机号码,邮箱,数字等)_第5张图片
至此,就是如何在DWZ框架中添加自定义数据验证了。

你可能感兴趣的:(前端技术)