element-plus el-form表单自定义验证、数据重置

数据校验

el-form支持对表单元素数据格式进行校验，使用rules配置验证规则

<el-form ref="userFormRef" :model="userForm" label-width="80px" :rules="rules">
      <el-form-item prop="username" label="用户名">
           <el-input v-model="userForm.username" placeholder="请输入用户名" :disabled="mode === 1"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
          <el-input v-model="userForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="confirm" label="确认密码">
            <el-input v-model="userForm.confirm" placeholder="请确认密码"></el-input>
     </el-form-item>
</el-form>

注意这个 prop字段，数据格式验证和重置都是依赖该字段实现

const rules = reactive<FormRules<UserForm>>({
    username: [
        { required: true, message: 'Please input username', trigger: 'blur' },
    ],
    password: [
        { required: true, message: 'Please input password', trigger: 'blur' },
    ],
    confirm: [
        { required: true, validator: checkConfirm, trigger: 'blur' }
    ]
})

rules中的key值对应表单上的prop，required: 必填项，message: 错误信息，trigger: 触发验证的方式，还支持邮箱格式、数据长度等等。validator表示自定义校验函数。

如果表单元素使用了v-if条件渲染， 没有渲染的字段不会触发校验

例：验证两次密码输入一致

const checkConfirm = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('Please input the password again'))
    } else if (value !== userForm.password) {
        callback(new Error("Two inputs don't match!"))
    } else {
        callback()
    }
}

rule: 验证规则，value: 触发验证时表单元素的值，callback: 返回验证结果的回调函数

数据提交

// formEl 传入表单组件实例, 使用ref定义
const userSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
           
            // valid 表示表单所有字段都校验通过
            // 其他操作

        }else{
           console.log('error submit!', fields) 
        }

    })
}

数据重置

el-form提供给我们了数据重置的方法，组件实例上的resetFields()，表单状态也会重置，不需要我们手动去还原表单初始值。

设置ref

<el-form ref="userFormRef" ...></el-form>

获取组件实例

//FormInstance类型从element-plus引入
const userFormRef = ref<FormInstance>()

数据重置

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    //只支持重置表单上prop定义的字段，
    //如果表单:model绑定的是对象中的属性值 :model="obj.form"
    //prop要设置为  prop="form.xxx"
}

resetForm(userFormRef)

数据重置不生效？

如果出现数据重置不生效的问题，首先检查prop定义是否准确，再检查表单赋值的时机有没有问题

resetFields()的作用是将表单数据重置到表单初始化的时候。

我们以用户的添加和编辑为例，el-form经常结合el-dialog使用，在对话框中让用户进行数据编写

// 编辑用户
const editUser = (row: UserInfo) => {
    userForm.value = row // 给表单赋值
    userVisible.value = true // 对话框显示
}

这时候再进行用户添加就会发现数据没有重置，因为表单还没有初始化，数据已经赋值了。如果只是简单的把表单赋值的代码放到对话框显示后面，也是不起作用的，因为vue的dom更新是异步的，因为性能优化，都知道vue的双向绑定，数据更改，视图会更新，设置 i =0，视图显示这个i，i自增1000次，视图不能也跟着更新1000次，实际只更新一次。

 这时候就要借用nextTick，dom更新完成后的延迟回调进行数据赋值

const editUser = (row: UserInfo) => {
    userVisible.value = true
    nextTick(() => {
        userForm.value = row
    })
}

 本篇文章到这里就结束了，希望对小伙伴们有所帮助