antd-vue 表单检验规范

1、表单验证实例

• 表单结构

// 简单的表单例子
    <a-form ref="formRef"
            :model="activity"
            :rules="rules">
      <a-form-item label="活动名称"
                   name="name">
        <a-input v-model:value="activity.name"
                 placeholder="请输入活动名称"
                 :maxlength="16"
                 :suffix="`${activity.name.length} / 16`"
                 @change="handleValidateSpec('name')"></a-input>
      </a-form-item>
      <a-form-item label="活动详情"
                   name="detail">
        <a-textarea v-model:value="activity.detail"
                    :auto-size="{ minRows: 6 }"
                    show-count
                    placeholder="请输入活动详情"
                    :maxlength="1000"
                    @change="handleValidateSpec('detail')" />
      </a-form-item>
    </a-form>

• js部分

1. 初始化

 	// 初始化
    const activity: any = reactive({
      name: '',
      detail: '',
    });
    
    // 表单实例
    const formRef = ref();

2. 编写验证规则

	// 异步自定义规则
    const validateDetail = () => {
      return new Promise((resolve, reject) => {
        if (activity.detail.length < 20) {
          reject('活动内容不能少于20个字');
        }
        resolve('');
      });
    };
    
	// 验证规则，可以使用已经写好的规则，可以编写自定义规则
    const rules = {
      name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
      detail: [
        { required: true, message: '请输入活动详情', trigger: 'blur' },
        { required: true, validator: validateDetail, trigger: 'blur' },
      ],
    };

3. 校验数据方法

    // 校验当前页所有数据
    const validatePage = () => {
      return new Promise((resolve) => {
        formRef.value.validate().then(() => {
          resolve('');
        });
      });
    };
    
    // 校验组件不支持监听的部分进行手动监听
    const validateSpec = (prop: string) => {
      formRef.value.validateFields([prop]);
    };
    
	// 校验组件不支持监听的部分进行手动监听
    const handleValidateSpec = (prop: string) => {
      validateSpec(prop);
    };

4. 表单提交前验证

	// 提交表单方法
    const handleConfirmEdit = () => {
      validatePage().then(() => {
        message.success('验证通过');
      });
    };

2、验证效果

• 鼠标移开验证成功

• 自定义方法异步验证成功

• 鼠标未移开根据change事件手动验证成功

• 验证通过情况