vue+elementui 注册:输入密码和再次输入密码验证
输入密码和再次输入密码验证
·
实现代码
html代码:
<el-form
class="form-content"
ref="register"
:model="register"
:rules="rules"
>
<el-form-item prop="phone">
<i class="el-icon-phone"></i>
<el-input v-model="register.phone" placeholder="手机号:"></el-input>
</el-form-item>
<el-form-item prop="psw">
<i class="el-icon-lock"></i>
<el-input v-model="register.psw" placeholder="输入密码:" type="password" show-password></el-input>
</el-form-item>
<el-form-item prop="checkPass">
<i class="el-icon-lock"></i>
<el-input v-model="register.checkPass" placeholder="再次确认密码:" type="password" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button class="btn-login" type="primary" @click="registers('register')">Register</el-button>
</el-form-item>
</el-form>
js代码:
data () {
// 密码验证
var validatePass = (rule,value,callback)=>{
if(value === ''){
callback(new Error('请输入密码'))
}else{
if(this.register.checkPass !== ''){
this.$refs.register.validateField('checkPass')
}
callback()
}
};
// 再次确认密码验证
var validateCheckPass = (rule,value,callback)=>{
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.register.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
// 手机号码验证
var validatePhone = (rule,value,callback)=>{
var reg=11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
if (value === '') {
callback(new Error('请输入手机号'));
} else if (!reg.test(value)) {
callback(new Error('手机号码格式不正确!'));
} else {
callback();
}
};
return {
register: {
phone: '',
psw:'',
checkPass:'',
},
rules:{
phone:[{validator: validatePhone, trigger: 'blur'}],
psw:[{validator: validatePass, trigger: 'blur'}],
checkPass:[{validator: validateCheckPass, trigger: 'blur'}]
},
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)