antd design for vue 中表单验证

首先是不能有空格

<a-form-model-item ref="title" label="新闻标题" prop="title">
        <a-input v-model="form.title" placeholder="请输入新闻标题" />
      </a-form-model-item>

title: [
          { required: true, message: '请输入新闻标题!', trigger: 'blur' },
          { pattern: '^[^ ]*$', message: '不能有空格', trigger: 'blur' },
        ],

不能有空格和特殊字符

{ pattern: '^[\u4e00-\u9fa5_a-zA-Z0-9]+$', message: '不能有空格,特殊字符',trigger: 'blur' }

如果输入框限制字数，则是官方的max，min

{ max: 120, message: '服务描述不多于120字' },

自定义校验

fs: [
          { required: true, message: '请打分', trigger: 'change' },
          {
            type: 'number',
            message: '请输入数字',
            transform(value) {
              if (value) {
                return Number(value)
              }
            },
          },
          {
            validator: this.validatePass,
            trigger: 'change',
          },
        ],

是限制输入数字以及自定义校验

validatePass(rule, value, callback) {
      //
      if (value > this.sum||value<0) {
        callback(new Error('输入有误'))
      }
      callback()
    },