SSM+VUE实现预约手机号校验

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、手机页面效果