寫一個vue組件Password.vue

沒有表單驗證只有3個表單項

<template><div><el-form><el-form-item label="舊密碼"><el-input></el-input></el-form-item><el-form-item label="新密碼"><el-input></el-input></el-form-item><el-form-item label="驗證密碼"><el-input></el-input></el-form-item></el-form></div>
</template>
<script setup></script>

路由省略

給這個表單綁定一個對象

<template><div><el-form :="data.form"><el-form-item label="舊密碼" v-model="data.form.oldPassword"><el-input ></el-input></el-form-item><el-form-item label="新密碼" v-model="data.form.password"><el-input></el-input></el-form-item><el-form-item label="驗證密碼" v-model="data.form.confirmPassword"><el-input></el-input></el-form-item></el-form></div>
</template>
<script setup>
import {reactive}  from "vue";
const data = reactive({form: {oldPassword: '',password: '',confirmPassword: ''}
})
</script>

給表單綁定規則注意表單項一定要有prop屬性 屬性值對應 data.rules里的屬性

<template><div><el-form :model="data.form" :rules="data.rules"><el-form-item label="舊密碼" prop="oldPassword" ><el-input v-model="data.form.oldPassword"></el-input></el-form-item><el-form-item label="新密碼"   prop="password"><el-input v-model="data.form.password"></el-input></el-form-item><el-form-item label="驗證密碼" ><el-input v-model="data.form.confirmPassword"></el-input></el-form-item></el-form></div>
</template>
<script setup>
import {reactive}  from "vue";
const data = reactive({form: {oldPassword: '',password: '',confirmPassword: ''},rules: {oldPassword: [{ required: true, message: '請輸入舊密碼', trigger: 'blur' },{ min: 6, max: 32, message: '長度在 6 到 32 個字符', trigger: 'blur' }],password: [{ required: true, message: '請輸入新密碼', trigger: 'blur' },{ min: 6, max: 32, message: '長度在 6 到 32個字符', trigger: 'blur' }]}
})
</script>

? ? ? ?

添加自定義規則注意規則有優先級的

<template><div><el-form :model="data.form" :rules="data.rules"><el-form-item label="舊密碼" prop="oldPassword" ><el-input v-model="data.form.oldPassword"></el-input></el-form-item><el-form-item label="新密碼"   prop="password"><el-input v-model="data.form.password"></el-input></el-form-item><el-form-item label="驗證密碼"   prop="confirmPassword"><el-input v-model="data.form.confirmPassword"></el-input></el-form-item></el-form></div>
</template>
<script setup>
import {reactive}  from "vue";
const validatePass1 = (rule, value, callback) => {if (value === '') {callback(new Error('請輸入新密碼'));} else if (value !== '123') {callback(new Error('舊密碼錯誤'));}else{callback();}
}
const validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('請再次輸入新密碼'));} else if (value !== data.form.password) {callback(new Error('兩次輸入密碼不一致!'));} else {callback();}
}
const data = reactive({form: {oldPassword: '',password: '',confirmPassword: ''},rules: {oldPassword: [{ required: true, message: '請輸入舊密碼', trigger: 'blur' },{validator: validatePass1, trigger: 'blur'}],password: [{ required: true, message: '請輸入新密碼', trigger: 'blur' },{ min: 6, max: 32, message: '長度在 6 到 32個字符', trigger: 'blur' }],confirmPassword: [{ required: true, message: '請再次輸入新密碼', trigger: 'blur' },{ validator: validatePass2, trigger: 'blur' }]}
})
</script>