element-UI之Form表单验证

1、在Form-item提示填写信息

<Form-item label="分类名称" prop="name">
            <Tooltip content="只能输入中英文字符且长度为0-40" placement="bottom-start">
              <Input name="name" v-model="formObj.name" placeholder="请输入名称" style="width: 408px"></Input>
            </Tooltip>
          </Form-item>

效果如图：

2.验证表单:验证不为空和字符长度限制。

 <Form id="edit-form" ref="formObj" :model="formObj" :rules="ruleValidate" :label-width="80">
<Form>


<script>
export default {
    data() {
         const validateName = (rule, value, callback) => { 
        const reg = /[\u4E00-\u9FA5_a-zA-Z]+$/;
        if (value === "") {
          callback(new Error('分类名称不能为空！'));
        } else {
          if (!reg.test(value)) {
            callback(new Error('请输入中文或英文字符！'));
          } else {
            callback();
          }
        }
      };
      return {
        id: '',
        ruleValidate: {
          name: [{required: true, validator:validateName, trigger: 'blur'},
                  {max:100, message: '分类名称不能超过40字符', trigger: 'blur'}
                ],
          remark: [{max:100, message: '备注不能超过100字符', trigger: 'blur'}],
        },
      }

   }

}
</script>