antd中表单校验

### Ant Design Vue 表单校验规则示例 在 Ant Design Vue 的表单组件中，`<a-form>` 和 `<a-form-item>` 是核心组件用于构建和管理表单逻辑。为了实现有效的表单校验，需遵循以下原则： #### 1. **基础配置** - `name` 属性是必需的，它指定了字段名称并绑定到表单数据模型。 - 使用 `rules` 定义校验规则数组。 以下是基本的表单校验规则示例[^1]： ```vue <template> <a-form :model="formState" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-form-item label="用户名" name="username" :rules="[ { required: true, message: '请输入用户名!', trigger: ['change', 'blur'] }, { min: 3, max: 20, message: '长度应在 3 到 20 字符之间', trigger: 'blur' } ]"> <a-input v-model:value="formState.username" /> </a-form-item> <a-form-item label="密码" name="password" :rules="[ { required: true, message: '请输入密码!', trigger: 'blur' }, { pattern: /^[A-Za-z0-9]{6,16}$/, message: '密码应为 6 至 16 位字母或数字组合', trigger: 'blur' } ]"> <a-input-password v-model:value="formState.password" /> </a-form-item> <a-form-item :wrapper-col="{ offset: 8, span: 16 }"> <a-button type="primary" html-type="submit">提交</a-button> </a-form-item> </a-form> </template> <script> export default { data() { return { formState: { username: '', password: '' } }; } }; </script> ``` #### 2. **自定义校验函数** 如果内置规则无法满足需求，可以使用自定义校验方法。通过传递回调函数来动态验证输入值。 示例如下[^1]： ```vue <a-form-item label="邮箱地址" name="email" :rules="[ { validator: validateEmail, trigger: 'blur' } ]"> <a-input v-model:value="formState.email" /> </a-form-item> <script> export default { data() { return { formState: { email: '' } }; }, methods: { validateEmail(rule, value, callback) { const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (!value || !regex.test(value)) { callback(new Error('请输入合法的电子邮件')); } else { callback(); } } } }; </script> ``` #### 3. **动态移除警告消息** 当用户修改了错误的内容后，可以通过监听事件触发重新校验以清除之前的警告提示。 示例如下[^1]： ```javascript watchEffect(() => { if (this.formState.fieldValue && this.$refs['myForm']) { this.$refs['myForm'].validateField('fieldKey'); } }); ``` --- ### 总结 以上展示了如何利用 Ant Design Vue 实现表单校验功能，包括但不限于必填项、正则匹配以及自定义校验逻辑等内容。确保每个 `<a-form-item>` 都设置了正确的 `name` 属性，并合理配置 `rules` 参数即可完成大部分场景下的校验工作。