第一步:在表单上添加 rules 属性,设置验证规则对象
第二步:在表单项设置 prop属性,声明验证的名称
第三步:设置验证规则对象
export default {
data(){
//验证规则函数
let 验证规则函数 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码')); //验证未通过
} else {
callback(); //验证通过
// 这里也可以发请求拿数据
}
};
//返回数据
return {
rules: {
name: [
{validator: 验证规则函数, trigger: 'blur'}
],
}
}
}
}
第四步:点击提交时验证
例:
<template>
<el-card>
<div slot="header">
<span>修改密码</span>
</div>
<!-- 表单 -->
<el-form ref="form" :rules="rules" :model="form" label-width="100px" status-icon>
<!-- 原密码 -->
<el-form-item label="原密码" prop="oldpwd">
<el-input v-model="form.oldpwd" type="password"></el-input>
</el-form-item>
<!-- 新密码 -->
<el-form-item label="新密码" prop="newpwd">
<el-input v-model="form.newpwd" type="password"></el-input>
</el-form-item>
<!-- 确认新密码 -->
<el-form-item label="确认新密码" prop="newpwd2">
<el-input v-model="form.newpwd2" type="password"></el-input>
</el-form-item>
<!-- 按钮 -->
<el-form-item>
<el-button type="primary" @click="submit">确定</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
import {checkOldpwd, editPwd} from "@/api/user.js"; //账号模块接口
import local from "@/utils/local.js"; //本地存储
export default {
data() {
// 表单验证
var confirmPwd = (rule, value, callback) => {
if (value !== this.form.newpwd) {
callback(new Error('两次输入密码不一致'));
} else {
callback();
}
};
// 验证旧密码是否正确
let oldpwd =async (rule, value, callback) => {
if(value.length < 6){
callback(new Error("密码必须写6位数以上"));
}else{
let res =await checkOldpwd({oldPwd: value});
if(res.data.code ===201){
callback(new Error(res.data.msg));
}else{
callback();
}
}
}
// 验证新密码是否和旧密码重复
let newpwd = (rule, value, callback) => {
if(this.form.newpwd === this.form.oldpwd){
callback(new Error("新密码和原密码重复"));
}else{
callback();
}
}
return {
form: {
oldpwd: '',
newpwd: '',
newpwd2: "",
},
// 表单验证
rules: {
oldpwd: [
{ required: true, message: '请输入旧密码', trigger: 'blur' },
{ validator: oldpwd, trigger: 'blur' },
],
newpwd: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ validator: newpwd, trigger: 'blur' },
],
newpwd2: [
{ validator: confirmPwd, required: true, trigger: 'blur' },
],
}
}
},
methods:{
// 确定按钮
submit(form){
this.$refs.form.validate(async (valid) => {
if (valid) {
let res = await editPwd({newPwd: this.form.newpwd});
if(res.data.code === 0){
this.$router.push("/login");
local.clear();
}
}
});
},
// 重置按钮
reset(form){
this.$refs.form.resetFields();
}
}
}
</script>