1、VUE数据绑定功能
手机号的输入框通过 v-model 绑定到 orderInfo.telephone 属性,相当于扩展了odrerInfo的属性
可以通过
<div class="input-row">
<label>手机号</label>
<input v-model="orderInfo.telephone" type="text" class="input-clear" placeholder="请输入手机号">
<input style="font-size: x-small;" id="validateCodeButton" @click="sendValidateCode()" type="button" value="发送验证码">
</div>
2、定义模型数据 orderInfo
//模型数据
data:{
setmeal:{},//套餐信息
orderInfo:{
setmealId:id,
sex:'1'
}//预约信息
},
3、手机号校验的js代码
/**
* 手机号校验
1--以1为开头;
2--第二位可为3,4,5,7,8,中的任意一位;
3--最后以0-9的9个整数结尾。
*/
function checkTelephone(telephone) {
var reg=/^[1][3,4,5,6,7,8][0-9]{9}$/;
if (!reg.test(telephone)) {
return false;
} else {
return true;
}
}
4、html代码
methods:{
//发送验证码
sendValidateCode(){
//获取用户输入的手机号
var telephone = this.orderInfo.telephone;
//调用js方法
if(!checkTelephone(telephone)) {
//校验不通过
this.$message.error('请输入正确的手机号');
return false;
}
},
5、手机页面效果