vue+elementUI用户修改密码的前端验证
<template>
<el-form :model="form" :rules="rules" ref="form" label-width="100px">
<el-form-item label="原密码" prop="oldPassword">
<el-input type="password" v-model="form.oldPassword"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input type="password" v-model="form.newPassword"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="form.confirmPassword"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
let validatePass = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码长度不能小于6位'));
} else {
callback();
}
};
let validatePass2 = (rule, value, callback) => {
if (value !== this.form.newPassword) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
form: {
oldPassword: '',
newPassword: '',
confirmPassword: ''
},
rules: {
oldPassword: [
{ required: true, message: '请输入原密码', trigger: 'blur' }
],
newPassword: [
{ required: true, validator: validatePass, trigger: 'blur' }
],
confirmPassword: [
{ required: true, validator: validatePass2, trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单校验通过,发起更新密码的请求
alert('密码修改成功!');
} else {
// 表单校验不通过
alert('表单校验不通过,请检查输入信息!');
return false;
}
});
}
}
};
</script>
这段代码使用Vue和Element UI创建了一个修改密码的表单,并包含了前端的校验逻辑。校验规则包括密码长度不能小于6位,以及两次密码输入是否一致。如果输入信息符合规则,会发起密码更新的请求。这是一个简单的密码修改前端校验的例子。
评论已关闭