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

2018-05-04  本文已影响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
上一篇下一篇

猜你喜欢

热点阅读