DWZ表单自定义验证规则

时间：2022-08-22 20:37:55

项目前台使用DWZ框架

今天做注册用户功能的时候，需要对登录名进行唯一性验证，特此记录DWZ表单自定义验证：

DWZ有专门存放自定义js代码文件：js/dwz.regional.zh.js，这个文件中的代码并不多：

/**
 * @author 张慧华 z@j-ui.com
 */
(function($){
// jQuery validate
if ($.validator) {
$.extend($.validator.messages, {
required: "必填字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: $.validator.format("长度最多是 {0} 的字符串"),
minlength: $.validator.format("长度最少是 {0} 的字符串"),
rangelength: $.validator.format("长度介于 {0} 和 {1} 之间的字符串"),
range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: $.validator.format("请输入一个最大为 {0} 的值"),
min: $.validator.format("请输入一个最小为 {0} 的值"),

alphanumeric: "字母、数字、下划线",
lettersonly: "必须是字母",
phone: "数字、空格、括号"
});
}
jQuery.validator.addMethod("c_singleUserName", function(value, element) {
if(this.optional(element)){
return true;
}else{
return (value != 'admin');
}
}, "登陆名重复");
// DWZ regional
$.setRegional("datepicker", {
dayNames: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
});
$.setRegional("alertMsg", {
title:{error:"错误", info:"提示", warn:"警告", correct:"成功", confirm:"确认提示"},
butMsg:{ok:"确定", yes:"是", no:"否", cancel:"取消"}
});
})(jQuery);

中间部分是我写的自定义验证的代码（只是一个小demo）： 

        jQuery.validator.addMethod("c_singleUserName", function(value, element) {
if(this.optional(element)){
return true;
}else{
return (value != 'admin');
}
}, "登陆名重复");
也就是说，自定义的验证直接写到文件的这个位置即可。

页面上的使用如下：

                        <div class="unit">
<label>名称：</label>
<input type="text" name="trueName" size="20" class="required c_singleUserName" value="$!obj.trueName" />
</div>

只需要将自定义验证的名称写到指定input元素的class属性中即可。required表示此项是必填项。

页面效果如下：

DWZ表单自定义验证规则
输入admin提示重复：

DWZ表单自定义验证规则

输入admin1，验证通过：

DWZ表单自定义验证规则

需要请求服务器端进行验证，写在function里面即可：

function(value, element) {}

参数：value，当前input元素的值。

标签：

相关文章