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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM