表单 验证 函数

（验证）html 示意代码

<div class="form-warper dataForm">
    <dd class="form-group">
       <label class="control-label">设备编码：</label>
       <input class="form-control ml5" placeholder="长度为20的编码" type="text" id="SBBM" name="SBBM" maxlength="20" ui-validate="required" ui-vtext="目录信息-设备编码"/>
       <span class="red">*</span>
    </dd>
</div>

ui-validate 属性的主要写法包括：

ui-validate="required"  //必填

ui-validate="{pattern: 'required,longitude'}"  //必填 ，正确的经度 （longitude 在validatePatterns中已经定义）

ui-validate="{pattern: 'integer'}" //必须为整数

ui-validate="{pattern:'required', maxlength:50}" // 必填，最大长度 50（英文1，中文2）

ui-validate="{pattern:'required', minlength:50}" // 必填，最小长度 50（英文1，中文2）

主要的组件html

---

---

---

---

js 代码

var validatePatterns = { 
        "required":     [/^[\S+\s*\S+]+$/ig, "不能为空！"],
        "integer":      [/^(0|[1-9][0-9]*)$/, "必须为整数！"],    
        "numeric":      [/^\d+(\.\d+)?$/, "不是合法的数字！"],
        "currency":     [/^\d+\.\d{1,2}$/, "不是合法的货币数字！"],
        "email":        [/^\w+@\w+(\.\w+)*$/, "不合法的email输入！"],
        "phone":        [/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/, "电话不合法！"],
        "mustChecked":  [/0+/g, "checkbox不能为空！"],
        "mustSelected": [/0+/g, "select不能为空！"],
        "ipAddress":    [/^([1-9]|[1-9]\d|1\d{2}|2[0-1]\d|22[0-3])(\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])){3}$/, "不是有效的IP地址！"],
        "netport":      [/^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/, "不合法的端口！"],
        "mac":          [/^[0-9,a-f,A-F]{2}[-][0-9,a-f,A-F]{2}[-][0-9,a-f,A-F]{2}[-][0-9,a-f,A-F]{2}[-][0-9,a-f,A-F]{2}[-][0-9,a-f,A-F]{2}$/, "不合法的mac地址！"], 
        "year":         [/^(\d{4})$/, "年份不合法！"],
        "mouth":        [/^(\d{4})-(0\d{1}|1[0-2])$/, "月份不合法！"],
        "date":         [/^{\d}{4}\-{\d}{2}\-{\d}{2}$/, "日期不合法！"],
        "timeHour":        [/^(0\d{1}|1\d{1}|2[0-3])$/, "小时不合法！"],  //HH
        "timeMinute":    [/^(0\d{1}|1\d{1}|2[0-3]):([0-5]\d{1})$/, "分钟不合法！"], //HH:mm
        "timeSeconds":  [/^(0\d{1}|1\d{1}|2[0-3]):[0-5]\d{1}:([0-5]\d{1})$/, "时间不合法！"], //HH:mm:ss
        "chineseOnly":    [/[^\u4E00-\u9FA5]/g, "输入不合法！请只输入中文！"],
        "mobilePhone":  [/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/, "手机号不合法！"],
        //"unicomPhone":  [/^13[0-4]{1}[\d]{8}$/, "不合法！"],
        //"telecomPhone": [/^(\d{7,8})|(\d{3,4}\-\d{7,8})$/, "不合法！"],
        "specials":     [/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;'\,.<>?]{1}[^`~!@$%^&+=\\\][\{\}:;'\,<>?]{0,}$/, "不能输入特殊字符！"],
        "pattern":      [null, "数据不合法！请确认"],
        "carCode":      [/^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/, "车牌号格式不正确"],
        "idCard":       [/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, "身份证号格式不正确"],
        'postcode':     [/^\d{6}$/, "邮编格式不正确"],
        'longitude':    [/^-?((180(\.0{0,6})?)|((\d{1,2}|1[0-7]\d)(\.\d{0,6})?))$/, "不是有效的经度！"],
        'latitude':     [/^-?((90(\.0{0,6})?)|((\d|[1-8]\d)(\.\d{0,6})?))$/, "不是有效的纬度！"],
        'digitOrLetter':[/^[A-Za-z0-9]*$/,"格式不正确(只支持数字或字母)"],
        "passport":        [/^(P\d{7})|(G\d{8})$/,"护照格式不正确"],
        "hk-passport":    [/^[a-zA-Z0-9]{5,21}$/,"港澳通行证格式不正确"],
        "driving":        [/^[a-zA-Z0-9]{3,21}$/,"驾照格式不正确"]
    };

/**
     * 表单验证
     * ui-validate 属性， minlength, maxlength,min (最小值),max (最大值)
     * 如果不需要验证隐藏项，flag需要传递值，默认不传值，兼容适用于tab页面切换的情况
     */
    this.validateForm = function($form,flag){
        
        var checkAll = true;
        $form.find("[ui-validate]").each(function(){
            if(flag){
                if($(this).is(':hidden')){
                    return ;
                }
            }
            var validate = $(this).attr("ui-validate");
            
            var pattern = $(this).attr('ui-pattern');
            
            var objectReg = new RegExp(/\{.*\}/g);
            
            var name = $(this).attr("name");
            
            var vtext = $(this).attr("ui-vtext");
            
            var type = $(this).attr("type") || $(this)[0].tagName;
            
            if(vtext == undefined || vtext == null || vtext == ''){
                vtext = name;
            }
            
            var value = $.trim(getFormValue($(this)));

            function getPattern(p){
                var reg = null;
                p = $.trim(p);
                if(p == "pattern") {
                    reg = [eval("/" + pattern + "/i"), validatePatterns["pattern"][1] ];
                } else {
                    reg = validatePatterns[p];  
                }
                if(reg == null) {

                    var msg = "[" + vtext + "]验证Pattern配置错误：" + p;
                    UI.util.alert(msg, 'warn');

                    throw new Error(msg);
                }
                return reg;
            }
            
            var pats = null;
            var allPatterns = '';
            if(objectReg.test(validate)){
                validate = eval("(" + validate + ")");
                
                if(validate.min && !isNaN(validate.min) && value != ''){
                    if(value < validate.min){
                        UI.util.alert("[" + vtext + "]不能小于" + validate.min, "warn");
                        $(this).focus();
                        checkAll = false;
                        return false;
                    }
                }
                
                if(validate.max && !isNaN(validate.max) && value != ''){
                    if(value > validate.max){
                        UI.util.alert("[" + vtext + "]不能大于" + validate.max, "warn");
                        $(this).val(validate.max);
                        $(this).focus();
                        checkAll = false;
                        return false;
                    }
                }
                if(validate.minlength && !isNaN(validate.minlength) && value != ''){
                    if(value.length < validate.minlength){
                        UI.util.alert("[" + vtext + "]不能少于" + validate.minlength + "个字符！", "warn");
                        $(this).focus();
                        checkAll = false;
                        return false;
                    }
                }
                
                if(validate.maxlength && !isNaN(validate.maxlength) && value != ''){
                    //中文字符算两个字符，英文和数字算一个字符
                    var len = value.length;
                    var blen = 0; 
                    for(i=0; i<len; i++) { 
                        if ((value.charCodeAt(i) & 0xff00) != 0) { 
                            blen ++; 
                        } 
                        blen ++; 
                    }
                    if(blen > validate.maxlength){
                        UI.util.alert("[" + vtext + "]不能超过" + validate.maxlength + "个字符！", "warn");
                        $(this).focus();
                        checkAll = false;
                        return false;
                    }
                }
                
                if(validate.pattern){
                    pats = validate.pattern.split(",");
                }
                
                allPatterns = validate.pattern;
            } else {
                pats = validate.split(",");
                
                allPatterns = validate;
            }
            
            if(allPatterns != null && allPatterns.indexOf("required") >= 0 || value != '') {
                if(pats != null){
                    for(var i = 0; i < pats.length; i++){
                        
                        var reg = getPattern(pats[i]);
                        if(!value.match(reg[0]) || (value.match(reg[0])==-1) && type =="SELECT"){
                            var vinfo = $(this).attr("ui-vinfo");
                            if(vinfo == undefined || vinfo == null || vinfo == ''){
                                vinfo = "[" + vtext + "]" + reg[1];
                            }
                            UI.util.alert(vinfo, "warn");
                            checkAll = false;
                            return false;
                        }
                    }
                }
            }
            
        });
        
        return checkAll;
    }

使用方式

if (!UI.util.validateForm($('.dataForm'))) {
            return;
  }  

（获取）html 代码

<dd class="form-group">
  <label class="control-label">设备/区域/系统名称：</label>
  <input class="form-control ml5" placeholder="可为平台名称、目录节点名称、设备名称等" type="text" id="SBMC" name="SBMC" maxlength="100" ui-validate="required" ui-vtext="目录信息-设备/区域/系统名称"/>
  <span class="red">*</span>
</dd>

函数代码

this.formToBean = function($form){

        var bean = {};
        
        var checkedValue = 1;
         
        $form.find("input, select, textarea, .ui-rating, .ui-switch, .dropdown-tree, .filtertag")
        .each(function(){
            if($(this).is("[ui-ignore]")){
                return ;
            }
            var name = $(this).attr("name");
            var type = $(this).attr("type") || $(this)[0].tagName;
            
            if(type == "button" || type == "reset" || type == "submit"){
                return ;
            }

            var value = getFormValue($(this));
            
            if(value != null){
                if(typeof value == 'string'){
                    value = $.trim(value);
                }
                if(type == 'checkbox'){
                    if(bean[name] == undefined){
                        bean[name] = value;
                    } else {
                        bean[name] += ',' + value;
                    }
                } else {
                    bean[name] = value;
                }
            }
        });

        return bean;
    }


function getFormValue($elem){
        var type = $elem.attr("type") || $elem[0].tagName;
        
        if(type == "radio"){
            if($elem.is(":checked")){
                return $elem.val();
            }
        } else if(type == "checkbox"){
            if($elem.is(":checked")){
                return $elem.val();
            }
        } else if(type == "ui-rating") {
            return $elem.rating("getValue");
            
        } else if(type == "ui-switch") {
            return $elem.uiswitch("getValue");
            
        } else if(type == "dropdown-tree") {
            return $elem.find(".tree-title").attr("title");
            //return $elem.dropdowntree("getSelectIds");
        } else if(type == "filtertag") {
            return $elem.filtertag("getSelectFilter");
            
        } else if( type == "SELECT" || type == "select"){
            var value = $elem.val();
            
            if( Object.prototype.toString.call(value).toLowerCase() == '[object array]'){

                var value = value.join(',');
            }
            return value;
            
        }else {
            return $elem.val();
        }
        return null;
    }

调用方法

var params = UI.util.formToBean($('.form-inline'));

得到的值

{
    SBMC：value
}