美文网首页
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