js 表单前端验证

项目中需要一个较通用的前端验证代码.

基于JQuery 1.4 开发.

luxury.validate = function(config){
    var form = document.forms[config.form];
    if (!form.vText)
        form.vText = [];
    if (!form.vRadio)
        form.vRadio = [];
   
    for (var k in config) {
        if (k == 'form')
            continue;
        var c = config[k];
        if (c.type == 'radio') {
            form.vRadio[k] = c;
            continue
        };
        var ele = form[k];
        if (c.empty)
            ele.value = c.empty;
       
        if (!c.msgArea)
            $(ele).after('');
       
        ele.config = c;
       
        var check = function(){
            var v = this.value.trim();
            var c = this.config;
           
            var msg = c.msgArea ? $('#' + c.msgArea) : $('#Msg_' + this.name);
           
            if (c.blank && !v.length) {
                this.validateChecked = false;
                return msg.text(c.blank);
            };
            if (c.reg && !c.reg.test(v)) {
                this.validateChecked = false;
                return msg.text(c.regMsg)
            };
            if (c.min !== undefined && v < c.min) {
                this.validateChecked = false;
                return msg.text(c.minMsg)
            };
            if (c.max !== undefined && v > c.max) {
                this.validateChecked = false;
                return msg.text(c.maxMsg)
            };
            if (c.minLength !== undefined && v.length < c.minLength) {
                this.validateChecked = false;
                return msg.text(c.minLengthMsg)
            };
            if (c.maxLength !== undefined && v.length > c.maxLength) {
                this.validateChecked = false;
                return msg.text(c.maxLengthMsg)
            };
            if (c.validator) {
                var r = c.validator(v);
                if (r !== true) {
                    this.validateChecked = false;
                    return msg.text(r)
                }
            };
            if (c.equal && v != $('#' + c.equal).val()) {
                this.validateChecked = false;
                return msg.text(c.equalMsg)
            };
           
            if (c.ajax) {
                this.validateChecked = undefined;
                var ele = this;
                msg.text('检查中...');
                $.getJSON(luxury.url(c.ajax.c, c.ajax.a, c.ajax.p), {
                    v: v
                }, function(j){
                    if (j.status == 'success') {
                        ele.validateChecked = true;
                        msg.text(c.successMsg ? c.successMsg : '')
                    }
                    else {
                        ele.validateChecked = false;
                        msg.text(j.msg)
                    }
                })
            }
            else {
                this.validateChecked = true;
                msg.text(c.successMsg ? c.successMsg : '')
            }
        };
        if (c.type != 'radio') {
            if (c.at && c.at == 'keyup') {
                ele.validateCheckFunction = 'keyup';
                $(ele).keyup(check)
            }
            else {
                ele.validateCheckFunction = 'blur';
                $(ele).blur(check)
            }
        };
        form.vText.push(k)
    };
   
    $(form).unbind('submit');
    $(form).submit(function(){
        for (var k in this.vText) {
            var ele = $('#' + this.vText[k]);
            if (ele[0].validateChecked === undefined) {
                ele.focus();
                if (ele[0].validateCheckFunction === 'keyup')
                    ele.keyup();
                else
                    ele.blur()
            }
            if (ele[0].validateChecked === true)
                continue;
           
            if (ele[0].validateChecked === false)
                ele.focus();
           
            return false
        };
        for (var k in this.vRadio) {
            var c = this.vRadio[k];
            if (c.blank)
                if (!$(form).find(':radio[name=' + k + ']:checked').length) {
                    $('#' + c.msgArea).text(c.blank);
                    return false
                }
                else {
                    $('#' + c.msgArea).text(c.successMsg ? c.cussessMsg : '')
                }
        };
        return true
    })
};

其中注意:luxury.url是一个拼URL的方法,请自行实现.


用法

前端表单验证的用法

 

luxury.validate({

form:'<表单的Name>',          //注意:不可以再有名字为Name的表单项了,

<表单项的Name>:{

//表单域的验证配置

},

…...

})

 

 

表单域参数

at	'<判断时机:keyup/blur>'	默认为blur
successMsg	'<验证成功后的提示>'	可选
msgArea	'<用于显示错误信息的块>'	可选,默认会在表单域后自动生成一个Label(红色)
type	'text/radio'	可选,默认是Text(这可以处理text及textarea)
blank	'<此文本域不允许为空的提示信息>'	可选
empty	'<此文本域的默认值>'	可选                (这东西其实是个default)
reg	<正则验证表达式>	可选
regMsg	'<不满足正则验证表达式时的提示信息>'	如reg则必须
min	<最小值>	可选
minMsg	'<小于最小值时的提示信息>'	如min则必须
max	<最大值>	可选
maxMsg	'<大于最大值时的提示信息>'	如max则必须
minLength	<最小长度>	可选
minLengthMsg	'<短于最小长度的提示信息>'	如minLength则必须
maxLength	<最大长度>	可选
maxLengthMsg	'<长于最大长度的提示信息>'	如maxLength则必须
validator	function(v){     //判断值是否有效的JS代码     //返回True表示有效     //返回字符串将作为提示出现 }	可选
equal	'<对比域的ID>'	可选
equalMsg	'<如果与对比域的值不同时的提示信息>'	如equal则必须
ajax	{     c:'<控制器名称>',     a:'<方法名称>',     p:<其它参数对象> }	额外会以v参数传递表单域的值,使用ajaxOk/ajaxError返回判断结果

 

 

如果指定了type=='radio',则只能使用以下属性

blank	'<如果所有单选都未选择的提示信息>'	可选
msgArea	'<用于显示错误信息的块>'	必须
successMsg	'<验证成功后的提示>'	可选