您的位置:首页 > 健康 > 养生 > 表单自定义规则的校验

表单自定义规则的校验

2024/12/23 7:40:41 来源:https://blog.csdn.net/iku_n/article/details/141261407  浏览:    关键词:表单自定义规则的校验

在 Vue 3 中使用 Element Plus 的表单组件进行自定义规则的校验非常方便。Element Plus 提供了 ElFormElFormItem 组件,它们内置了表单验证的功能。下面我将详细介绍如何使用 Element Plus 进行自定义规则的校验。

创建表单及规则

首先,你需要创建一个 ElForm 组件,并为其提供一个 model rules 对象。然后在每个 ElFormItem 中绑定 prop 属性,该属性应该对应于 model 中的字段。

示例代码

<template><el-form :model="form" :rules="rules" ref="formRef" label-width="80px"><el-form-item label="用户名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="form.password" type="password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button></el-form-item></el-form>
</template><script setup>
import { ref } from 'vue';const formRef = ref(null);
const form = ref({username: '',password: ''
});const rules = ref({username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },{ validator: validatePassword, trigger: 'blur' }]
});function validatePassword(rule, value, callback) {if (value === '') {callback(new Error('请输入密码'));} else {if (form.value.username === value) {callback(new Error('密码不能与用户名相同'));} else {callback();}}
}function submitForm() {formRef.value.validate((valid) => {if (valid) {alert('提交成功!');} else {console.log('验证失败');return false;}});
}
</script>

说明

  1. 定义表单模型form 是一个响应式对象,用于存储表单数据。
  2. 定义验证规则rules 对象定义了表单验证规则。
    • required: 是否必填。
    • min 和 max: 字符串长度的最小和最大值。
    • trigger: 触发验证的事件,例如 blur 表示失去焦点时触发验证,change是change:改变触发。
    • validator: 自定义验证函数。
  3. 自定义验证函数validatePassword 函数用于验证密码是否与用户名相同。
  4. 提交表单submitForm 函数调用 formRef.value.validate 方法来触发表单验证。如果所有验证都通过,则提交表单。

注意事项

  • 确保在 ElForm 上使用 ref 属性,以便可以通过引用访问表单实例。
  • 自定义验证函数的第一个参数 rule 是当前验证规则的信息,第二个参数 value 是表单字段的值,第三个参数 callback 是回调函数,用于报告验证结果。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com