一，官方文档地址:
https://element-plus.gitee.io/zh-CN/component/form.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99二，js代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
<template>
<div class="view_root">
<el-card shadow="never">
<el-form :model="ruleForm" status-icon :rules="rules" ref="refForm" label-width="100px" class="demo-ruleForm" style="width:600px;">
<el-form-item label="原始密码" prop="originPass" style="margin-bottom: 20px;">
<el-input type="password" v-model="ruleForm.originPass" placeholder="请输入原始密码" autocomplete="off" show-password></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPass" style="margin-bottom: 20px;">
<el-input type="password" placeholder="请输入新密码" v-model="ruleForm.newPass" autocomplete="off" show-password></el-input>
</el-form-item>
<el-form-item label="确认新密码" prop="checkPass" style="margin-bottom: 20px;">
<el-input type="password" placeholder="请再次输入新密码" v-model="ruleForm.checkPass" autocomplete="off" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import {ElMessage} from "element-plus";
import {ref,reactive} from "vue";
import {post} from "@/api/axios";
export default {
name:"UserPassword",
setup() {
//表单的ref
const refForm = ref(null);
//提交表单
const submitForm = () => {
refForm.value.validate((valid) => {
if (valid) {
//提交到api
try {
var data = new FormData();
// 创建一个表单数据
data.append("originpass",ruleForm.originPass);
data.append("newpass",ruleForm.newPass);
data.append("checkpass",ruleForm.checkPass);
post('/api/login/password',data).then(res => {
if (res.code == 0) {
//提示
ElMessage.success("密码修改成功!");
} else {
ElMessage.error("密码修改失败:"+res.msg);
}
}).catch((error) => {
console.log(error)
})
} catch (error) {
console.log(error)
ElMessage.error("密码修改出错");
}
} else {
console.log('error submit!!');
return false;
}
});
};
//重置表单
const resetForm = () => {
refForm.value.resetFields();
}
//表单的数据
const ruleForm = reactive({
originPass:'',
newPass: '',
checkPass: '',
});
//原始密码的验证
const validateOriginPass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入原始密码'));
} else if (value.length < 3) {
callback(new Error('密码长度应不低于6个字符'));
} else {
callback();
}
};
//新输入密码的验证
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入新密码'));
} else if (value.length < 6) {
callback(new Error('密码长度应不低于6个字符'));
} else {
if (ruleForm.checkPass !== '') {
refForm.value.validateField('checkPass', () => null);
}
callback();
}
};
//确认密码的验证
const validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value.length < 6) {
callback(new Error('密码长度应不低于6个字符'));
} else if (value !== ruleForm.newPass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
//表单验证的规则
const rules = ref({
originPass: [
{required: true, validator: validateOriginPass, trigger: 'blur' }
],
newPass: [
{ required: true,validator: validatePass, trigger: 'blur' }
],
checkPass: [
{required: true, validator: validatePass2, trigger: 'blur' }
],
});
return {
refForm,
rules,
ruleForm,
resetForm,
submitForm,
}
},
}
</script>
|
三，效果:
说明：刘宏缔的架构森林—专注it技术的博客，
网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/09/29/vue-zi-ding-yi-validator-yan-zheng-gui-ze-elementplus-2-3-12/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: [email protected]
四，查看vue/element-plus框架版本：
liuhongdi@lhdpc:/data/vue/responsive$ npm list vue
[email protected] /data/vue/responsive
└─┬ [email protected]
└─┬ @vue/[email protected]
└── [email protected] dedupedliuhongdi@lhdpc:/data/vue/responsive$ npm list element-plus
[email protected] /data/vue/responsive
└── [email protected]