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>