美文网首页
vux x-input is-type 自定义输入框验证

vux x-input is-type 自定义输入框验证

作者: pengkiw | 来源:发表于2018-12-27 16:16 被阅读0次

vux 官方文档 x-input

x-input  组件自带 is-type  验证 支持  email, china-name, china-mobile 

1 组件自带验证效果:

<group>

        <x-input title="title" v-model="value"  is-type="china-mobile"></x-input>

</group>

自动验证 中国手机号码格式  

1)输入错误效果

2)输入正确效果

2 自定义 正则验证 

<group>
     <x-input title="title" v-model="value" :is-type="checkIdcard"></x-input>
</group>


methods:{

    checkIdcard(value){
         var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;    //只验证了身份证长度
                //省份证 正则验证 (第一代省份证为15位)
         if(reg.test(value)){
             return {valid:true}   //验证正确  返回valid:true
         }else{
             return {valid:false,msg:"省份证格式错误"}    // 验证错误 返回valid:false;
         }
     },

}

1)输入错误效果

2)输入正确效果

相关文章

网友评论

      本文标题:vux x-input is-type 自定义输入框验证

      本文链接:https://www.haomeiwen.com/subject/hvzrlqtx.html