正则验证手机号demo
-
template中定义标签框架
手机号: <input type="text" v-model="Phone" oninput="if(value.length>11)value=value.slice(0,11)" placeholder="请输入您的手机号"/> <Button color="blue" @click="reg()">注册</Button>
-
data中定义我们需要的变量
data() { return { Phone: '' } },
-
methobs中定义方法
reg() { //判断用户是否输入 if (this.username === '' || this.password === '' || this.Phone === '') { this.$Message('请检查输入'); return false } else { //正则判断手机号 if (!(/^1[34578]\d{9}$/.test(this.Phone))) { this.$Message('手机号格式不正确'); return false } else { this.axios.get(' http://127.0.0.1:8000/register/', { params: { username: this.username, password: this.password, phone:this.Phone } }) .then(res => { if (res.data.code === 200) { this.$Message(res.data.msg) } else { this.$Message(res.data.msg) } }) } } }
-
最终效果