美文网首页
vux 获取 is-type 校验的返回值

vux 获取 is-type 校验的返回值

作者: 寻梦的竹子 | 来源:发表于2018-05-04 12:11 被阅读0次

    vux使用x-input
    情形如下:
    表单中需要填写手机号,填完手机号之后,进行提交。点击“提交”按钮的时候,需要判断手机号是否通过校验,vux提供了is-type内置验证器,我们省去了自己校验手机号的过程。

    <template>
      <div id="login">
    
        <group label-width="5.5em" label-margin-right="2em" label-align="left">
          <x-input title="手机号码" ref="mobile" name="mobile" v-model="mobile" placeholder="请输入手机号码" :max="11" keyboard="number"
                   is-type="china-mobile" required></x-input>
        </group>
        <div style="padding:15px;">
          <x-button @click.native="submitData" type="primary">提交</x-button>
        </div>
      </div>
    
    </template>
    
    <script>
      import {XInput, Group,XButton} from 'vux'
    
      export default {
        name: "login",
        components: {
          XInput, Group,XButton
        },
        data() {
          return {
            mobile: ''
          }
        },
        mounted: function () {
          this.$nextTick(() => {
    
          })
        },
        methods: {
          submitData() {
            //去验证手机号  this.$refs.mobile.validate();
            //去获取验证手机号的结果
            console.log("result:"+this.$refs.mobile.valid);
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    
    
    

    手机号填写错误,校验结果如下:(校验结果看控制台的打印数据)

    image.png

    手机号填写正确(手机号我打了马赛格,大家可以自己试试),校验结果如下:(校验结果看控制台的打印数据)

    image.png

    相关文章

      网友评论

          本文标题:vux 获取 is-type 校验的返回值

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