js 表单前端验证

古城微笑少年丶 2022-09-19 10:49 211阅读 0赞

项目中需要一个较通用的前端验证代码. 
 
基于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('<lable id="Msg\_' + k + '" style="color:red;margin-left:20px;"></label>'); 
        
        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>:\{ 
 
 //表单域的验证配置
 
 \},
 
 …...
 
 \})
 
  
 
  
 
 表单域参数
 
 <table style="direction: ltr; border-collapse: collapse; border: 1pt solid rgb(163, 163, 163);"> 
 <tbody> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> at </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> '&lt;判断时机:keyup/blur&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 默认为blur </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> successMsg </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> '&lt;验证成功后的提示&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 可选 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> msgArea </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> '&lt;用于显示错误信息的块&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 可选,默认会在表单域后自动生成一个Label(红色) </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> type </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> 'text/radio' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 可选,默认是Text(这可以处理text及textarea) </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> blank </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> '&lt;此文本域不允许为空的提示信息&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 可选 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> empty </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> '&lt;此文本域的默认值&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 可选&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (这东西其实是个default) </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> reg </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> &lt;正则验证表达式&gt; </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 可选 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> regMsg </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> '&lt;不满足正则验证表达式时的提示信息&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 如reg则必须 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> min </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> &lt;最小值&gt; </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 可选 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> minMsg </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> '&lt;小于最小值时的提示信息&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 如min则必须 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> max </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> &lt;最大值&gt; </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 可选 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> maxMsg </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> '&lt;大于最大值时的提示信息&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 如max则必须 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> minLength </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> &lt;最小长度&gt; </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 可选 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> minLengthMsg </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> '&lt;短于最小长度的提示信息&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 如minLength则必须 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> maxLength </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> &lt;最大长度&gt; </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 可选 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> maxLengthMsg </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> '&lt;长于最大长度的提示信息&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 如maxLength则必须 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> validator </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> function(v){ &nbsp;&nbsp;&nbsp; //判断值是否有效的JS代码 &nbsp;&nbsp;&nbsp; //返回True表示有效 &nbsp;&nbsp;&nbsp; //返回字符串将作为提示出现 } </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 可选 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> equal </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> '&lt;对比域的ID&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 可选 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> equalMsg </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> '&lt;如果与对比域的值不同时的提示信息&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 如equal则必须 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 1.0708in; padding: 4pt;"> ajax </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.6673in; padding: 4pt;"> { &nbsp;&nbsp;&nbsp; c:'&lt;控制器名称&gt;', &nbsp;&nbsp;&nbsp; a:'&lt;方法名称&gt;', &nbsp;&nbsp;&nbsp; p:&lt;其它参数对象&gt; } </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 4.2166in; padding: 4pt;"> 额外会以v参数传递表单域的值,使用ajaxOk/ajaxError返回判断结果 </td> 
 </tr> 
 </tbody> 
 </table>
 
  
 
  
 
 如果指定了type=='radio',则只能使用以下属性
 
 <table style="direction: ltr; border-collapse: collapse; border: 1pt solid rgb(163, 163, 163);"> 
 <tbody> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 0.9069in; padding: 4pt;"> blank </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.5013in; padding: 4pt;"> '&lt;如果所有单选都未选择的提示信息&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 0.7062in; padding: 4pt;"> 可选 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 0.9069in; padding: 4pt;"> msgArea </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.5013in; padding: 4pt;"> '&lt;用于显示错误信息的块&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 0.7062in; padding: 4pt;"> 必须 </td> 
 </tr> 
 <tr> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 0.9069in; padding: 4pt;"> successMsg </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 2.5013in; padding: 4pt;"> '&lt;验证成功后的提示&gt;' </td> 
 <td style="border: 1pt solid rgb(163, 163, 163); vertical-align: top; width: 0.7062in; padding: 4pt;"> 可选 </td> 
 </tr> 
 </tbody> 
 </table>

阅读(151) | 评论(0) | 转发(0) |

上一篇：配置信息 类

下一篇：开发随笔 - trim