DWZ表单自定义验证规则

项目前台使用DWZ框架

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

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

/**
 * @author 张慧华 [email protected]
 */
(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');
		}
	}, "登陆名重复");
也就是说,自定义的验证直接写到文件的这个位置即可。

页面上的使用如下:

                        

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

页面效果如下:

DWZ表单自定义验证规则_第1张图片
输入admin提示重复:

DWZ表单自定义验证规则_第2张图片

输入admin1,验证通过:

DWZ表单自定义验证规则_第3张图片

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

function(value, element) {}

参数:value,当前input元素的值。

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