首页 > 其他 > 详细

vue中的监听事件

时间:2020-04-09 16:10:48      阅读:69      评论:0      收藏:0      [点我收藏+]
<el-form :model="inforData" :rules="rules" ref="inforData">
  <el-form-item label="手机号"  prop=phone>
       <el-input v-model="inforData.phone" v-bind:disabled=cantClick @change="changePhone" type="text" placeholder="请输入手机号"></el-input>
       <el-button v-show=canShow @click="change" class="change">修改</el-button>
    </el-form-item>
    <el-form-item class="code" label="验证码" prop="phoneCode"  v-show="canSure">
        <el-input type="text"  v-model="inforData.phoneCode" placeholder="请输入手机验证码"></el-input>
        <el-button v-show = "isBtn" @click = "getCode" v-bind:disabled=canSend>发送验证码</el-button>
        <el-button v-show = "isTime" style="width:100px;">{{time}}s</el-button>
    </el-form-item>
    <el-form-item label="邮箱" prop="email" style="margin-bottom:20px;">
        <el-input v-model="inforData.email" v-bind:disabled=cantClick type="text" placeholder="请输入邮箱"></el-input>
        <el-button v-show="canShow"  @click="change" class="change">修改</el-button>
    </el-form-item>
    <div class="message">{{message}}</div>
    <el-button class="sure" v-show="canSure" @click="confirm(‘inforData‘)">确定</el-button>
 </el-form>
export default {
    data(){
        //验证手机号是否正确
        var regPnone =(rule,value,callback)=>{
            if(!value){
                return callback(new Error(请输入手机号));
            }else{
                const b = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
                if(b.test(value)){
                    callback();
                }else{
                    return callback(new Error(请输入正确的手机号));
                }
            }
        };
        //验证邮箱是否正确
        var regEmail= (rule,value,callback)=>{
            if(!value){
                return callback(new Error(请输入邮箱));
            }else{
                const a = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
                if(a.test(value)){
                    callback();
                }else{
                    return callback(new Error(邮箱格式不正确));
                }
            }
        };return{
            isBtn:true,
            isTime:false,
            message:‘‘,
            canSend:false,
            dataChange:‘‘,
            inforData:{
                phone:‘‘,
                email:‘‘,
                phoneCode:‘‘
            },
            rules:{
                phone:[
                { required:true,validator:regPnone,trigger:blur}
                ],
                phoneCode:[
                { required:true,validator:regPhoneCode,trigger:blur}
                ],
                email:[
                { required:true,validator:regEmail,trigger:blur}
                ]
            }
        }
    },//监听手机号是否变化
    watch:{
        dataChange:function(newVal,oldVal){
            if(newVal !== oldVal){
                this.canSend = false;
            }
        }
    },
    methods:{//手机号改变
        changePhone:function(val){
            this.dataChange = val;
        },
    }
}

技术分享图片

vue中的监听事件

原文:https://www.cnblogs.com/gwkzb/p/12667239.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!