Ant Design Vue 为表单验证提供了强大且灵活的机制,允许您定义和强制执行自定义验证规则以验证表单输入。这对于需要根据超出 Ant Design Vue 提供的默认验证规则的特定条件验证用户输入时特别有用。
定义验证规则
验证规则使用对象表示法定义,其中每个键代表一个验证规则,对应的值代表该规则的配置。以下是一个基本验证规则对象的示例:
JavaScript
const rules = {
required: true,
message: '此字段不能为空',
};
在此示例中,required 规则确保输入字段不能为空。message 属性提供了一个自定义错误消息,如果验证失败,该消息将显示给用户。
使用验证规则
要将验证规则应用于表单输入,您可以使用 v-decorator 指令以及 rules 道具。以下是如何将先前示例中的 required 规则应用于输入字段的示例:
HTML
在此示例中,name 输入字段将是必需的,如果为空,则会显示错误消息“此字段不能为空”。
自定义验证规则
Ant Design Vue 还允许您使用 JavaScript 函数创建自定义验证规则。这使您可以完全控制验证逻辑,并能够根据复杂条件验证用户输入。
要创建自定义验证规则,您需要定义一个函数,该函数有两个参数:
value: 要验证的输入字段的值
callback: 您必须调用的回调函数以指示验证结果
回调函数有两个参数:
error: 一个布尔值,指示验证是否失败(true)或成功(false)
message: 如果验证失败,则可选的错误消息将显示
以下是一个自定义验证规则的示例,该规则检查输入值是否有效的电子邮件地址:
JavaScript
const validateEmail = (value, callback) => {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const isValid = re.test(value);
callback(isValid, !isValid ? '无效的电子邮件地址' : undefined);
};
要使用此自定义验证规则,您可以将其添加到 rules 对象中,以及其他验证规则:
JavaScript
const rules = {
required: true,
type: 'email',
validator: validateEmail,
};
使用 Form.useForm Hook
Form.useForm hook 提供了一种更高级的表单验证方法,允许您管理表单状态、处理验证错误并提交表单数据。它还使您可以使用类似于上面描述的方法定义自定义验证规则。