form表单校验 rules规则

官网：

https://github.com/freeformsystems/async-validate

翻译：async-validator 的中文文档翻译 - 黄zzzz - 博客园

•  下拉框select

  <a-form-item label="类型" name="type">
    <a-select
      v-model:value="formState.type"
      style="width: 120px"
      :options="typeOptions"
    >
    </a-select>
  </a-form-item>

 [{required: true, message: $t('message.command_name'), trigger: 'change', type: 'number'}]

• input  字符串,textarea

  <a-form-item ref="name" label="名称" name="name">
    <a-input v-model:value="formState.name"/>
   //<a-textarea v-model:value="formState.name" />
  </a-form-item>
   

[{required: true, message: $t('message.command_name'), trigger: 'blur'}]

• input  number

 <FormItem label="排序：" prop="sort">
        <Input v-model="sort" placeholder="请输入排序"></Input>
      </FormItem>

sort: [{required: true, message: '排序不能为空', trigger: 'blur', type: 'number'},
       {message: '请输入数字格式', trigger: 'blur', type: 'number', transform: (value) => Number(value)}]

• 数组 checkBoxGroup

<a-form-item label="Activity type" name="type">
      <a-checkbox-group v-model:value="formState.type">
        <a-checkbox value="1" name="type">Online</a-checkbox>
        <a-checkbox value="2" name="type">Promotion</a-checkbox>
        <a-checkbox value="3" name="type">Offline</a-checkbox>
      </a-checkbox-group>
    </a-form-item>




type: [{type: 'array',required: true,message: 'Please select at least one activity type',trigger: 'change'}],

• 对象，日期

 <a-form-item label="Activity time" required name="date1">
      <a-date-picker
        v-model:value="formState.date1"
        show-time
        type="date"
        placeholder="Pick a date"
        style="width: 100%"
      />
    </a-form-item>


  date1: [{ required: true, message: 'Please pick a date', trigger: 'change', type: 'object' }],

• 自定义校验

 id: [{
			validator: (rule, value, callback) => {
                if (value == null || value == "") {
                  callback("提示信息");
                } else {
                  callback();
                }
              },
			trigger: "submit"
		}],

• 多重校验

//参考引用：https://www.cnblogs.com/5201314m/p/13131052.html

name: [

    { min: 3, max: 4, message: '长度在 3 到 4 个字符', trigger: ['blur', 'change'] },

    { validator: validateCode, trigger: ['blur', 'change'] },

    { required: true, message: '请输入活动名称', trigger: 'blur' },

  ]