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
