<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const checkAge = (rule: any, value: any, callback: any) => {
if (!value) {
return callback(new Error('请输入用户名'))
} else {
callback()
}
}
const validatePass = (rule: any, value: any, callback: any) => {
if (value === '') {
callback(new Error('请输入密码'))
} else {
if (ruleForm.checkPass !== '') {
if (!ruleFormRef.value) return
ruleFormRef.value.validateField('checkPass')
}
callback()
}
}
const validatePass2 = (rule: any, value: any, callback: any) => {
if (value === '') {
callback(new Error('请输入确认密码'))
} else if (value !== ruleForm.pass) {
callback(new Error("必须一致"))
} else {
callback()
}
}
const ruleForm = reactive({
name: '',
pass: '',
checkPass: '',
})
const rules = reactive<FormRules<typeof ruleForm>>({
name: [{ validator: checkAge, trigger: 'blur' }],
pass: [{ validator: validatePass, trigger: 'blur' }],
checkPass: [{ validator: validatePass2, trigger: 'blur' }],
})
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
alert('提交')
console.log('submit!')
} else {
console.log('error submit!')
}
})
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
</script>
<template>
<div class="container1">
<el-form
ref="ruleFormRef"
style="max-width: 500px; margin: 0 auto;"
:model="ruleForm"
status-icon
:rules="rules"
label-width="auto"
class="demo-ruleForm">
<el-form-item label="用户名" prop="name">
<el-input v-model.number="ruleForm.name" />
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input
v-model="ruleForm.checkPass"
type="password"
autocomplete="off"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
<el-button @click="resetForm(ruleFormRef)">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<style scoped>
.container1{
background: rgba(254,233,230,1);
height: 100vh;
}
</style>