vue中的监听事件

<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;
        },
    }
}

posted @ 2020-04-09 15:27  奔向太阳的向日葵  阅读(810)  评论(0编辑  收藏  举报