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