mvalidator手机端校验

官网地址：https://github.com/efri-yang/mobileValidate#%E5%8F%82%E6%95%B0

使用方法：

html如下：

<li class="li"><label class="label">车牌号：</label><span class="required"><input type="text" class="field-text input" id="carNumber" name="carNumber" belong="roCar" data-required="true" data-descriptions="carNumber" data-describedby="carNumber-description" data-conditional="digit" data-max="8"></span>
    <div id="carNumber-description"></div>
</li>
<li class="li"><label class="label">制造厂商：</label><span class="required"><input type="text" class="field-text input" id="manufacturer"  data-required="true" data-descriptions="manufacturer" data-describedby="manufacturer-description"></span>
    <div id="manufacturer-description"></div>
</li>
<li class="li"><label class="label">车辆型号：</label><span class="required"><input type="text" class="field-text input" id="carType" data-required="true" data-descriptions="carType" data-describedby="carType-description" ></span>
    <div id="carType-description"></div>
</li>
<li class="li"><label class="label">出厂年份：</label><span><input data-role="number" data-digit="0" type="number" class="input" name="factoryYear" id="factoryYear" belong="roCar" data-max="4" data-descriptions="factoryYear" data-describedby="factoryYear-description" data-conditional="greaterNow"></span>
    <div id="factoryYear-description"></div>
</li>
<li class="li"><label class="label">车架号码：</label><span><input type="text" class="input" name="frameNumber" id="frameNumber" belong="roCar" data-max="20" data-descriptions="frameNumber" data-describedby="frameNumber-description" data-conditional="digit"></span>
    <div id="frameNumber-description"></div>
</li>

js如下：

//表单验证
    var descriptions={
        carNumber:{
            required : '<div class="field-invalidmsg" style="color:red;">请输入车牌号</div>',
            conditional : '<div class="field-invalidmsg" style="color:red;">车牌号必须小于8位</div>',
            valid : ""
        },
        manufacturer:{
            required : '<div class="field-invalidmsg" style="color:red;">请输入制造厂商</div>',
            valid : ""
        },
        carType:{
            required : '<div class="field-invalidmsg" style="color:red;">请输入车辆型号</div>',
            valid : ""
        },
        frameNumber:{
            conditional : '<div class="field-invalidmsg" style="color:red;">车架号码必须小于20位</div>',
            valid : ""
        },
        customerName:{
            conditional : '<div class="field-invalidmsg" style="color:red;">姓名必须小于20位</div>',
            valid : ""
        },
        email:{
            conditional : '<div class="field-invalidmsg" style="color:red;">email必须小于100位</div>',
            valid : ""
        },
        phone:{
            conditional : '<div class="field-invalidmsg" style="color:red;">手机号必须小于13位</div>',
            valid : ""
        },
        textarea1:{
            conditional : '<div class="field-invalidmsg" style="color:red;">备注必须小于200位</div>',
            valid : ""
        },
        couponCode:{
            conditional : '<div class="field-invalidmsg" style="color:red;">优惠券必须小于50位</div>',
            valid : ""
        },
        roNumber:{
            required : '<div class="field-invalidmsg" style="color:red;">请输入工单号</div>',
            conditional : '<div class="field-invalidmsg" style="color:red;">工单号必须小于16位</div>',
            valid : ""
        },
        appointInDate: {
            conditional : '<div class="field-invalidmsg" style="color:red;">请输入预约进厂时间</div>',
            valid : ""
        },
        inDate:{
            required : '<div class="field-invalidmsg" style="color:red;">请输进厂时间</div>',
            valid : ""
        },
        factoryYear: {
            conditional : '<div class="field-invalidmsg" style="color:red;">出厂年份要大于1900小于今年</div>',
            valid : ""
        },
        textarea2:{
            conditional : '<div class="field-invalidmsg" style="color:red;">备注必须小于200位</div>',
            valid : ""
        }
    };
    $("#form").validate({
        conditional:{
            isappointed:function(val){
                var flag;
                return (isAppointed==true&&val=="") ? false :true;
            },
            greaterNow:function(val){
                if(val){
                    return ((val<=new Date().getFullYear())&&(val>=1900)||val=="0")?true:false;
                }
                else return true;
            },
            digit:function(val,options){
                var digit=$(this).attr("data-max");
                var length=val.length;
                return (length<=digit)?true:false;
            }
        },
        valid: savefunc,
        descriptions:descriptions
    });
})

重点：

html配置：

 data-required="true" data-descriptions="carNumber" data-describedby="carNumber-description" data-conditional="digit"

js配置：

descriptions

conditional

valid

渲染后的效果如下：

在自己的使用过程中由于插件受到自己的框架影响报错，我自己修改了一下又能用了

$.fn.mvalidateDestroy=function(){
    var $form=$(this),$fields,
        dataValidate=$form.data(name);
    if(typeof dataValidate!="object") {
        if ($form.is('form') && $.isPlainObject(dataValidate) && typeof(dataValidate.options.namespace) == 'string') {
            $fields = $form.removeData(name).find(allTypes);
            $fields.off('.' + dataValidate.options.namespace);
        }
    }
    return $form;
}

后来查了一下原因，是因为我用了sui组件，sui修改了zepto.js的data方法，使之能够存储对象，只需要再判断一次datavalidate是不是一个对象即可解决这个报错问题