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

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读