使用element UI非必填字段校验的效果修改

必填字段应该达到的效果是：

不填-> 提示应该要填写

填写-> 对了 -> 框变绿

       -> 错了 -> 框变红 提示错误原因

 

非必填字段应达到的效果是：

不填-> 不校验

填了-> 校验 -> 正确绿框 错误红框

填了删除-> 不校验

 

方法一、自定义校验规则

  validator:(rule,value,callback)=>{
      if(value != ""){
          if((/(^[^\x00-\xff]{2,}$)|(^[a-zA-Z]{3,}$)/).test(value) == false){
              callback(new Error("两位以上中文或3位以上英文"));
          }else{
              callback();
              console.log(callback)
          }
      }
  },
  trigger:'blur'
  }

 

验证

function（source，[ options ]，callback）：Promise

• source：要验证的对象（必需）。
• options：描述验证处理选项的对象（可选）。
• callback：验证完成时调用的回调函数（必需）。

该方法将返回一个Promise对象，如：

• then()，验证通过
• catch({ errors, fields })，验证失败，错误是所有错误的数组，字段是由字段名称键入的对象，其数组为

选项

• suppressWarning：Boolean，是否禁止关于无效值的内部警告。

• first：Boolean，callback当第一个验证规则生成错误时调用，不再处理验证规则。如果您的验证涉及多个异步调用（例如，数据库查询），并且您只需要第一个错误，请使用此选项。

• firstFields：Boolean | String []，callback当指定字段的第一个验证规则生成错误时调用，不再处理相同字段的验证规则。 true意味着所有领域。

  规则

规则可以是执行验证的函数。

功能（规则，价值，回调，来源，选项）

• rule：源描述符中与要验证的字段名称对应的验证规则。始终为其分配一个field属性，其中包含要验证的字段的名称。
• value：要验证的源对象属性的值。
• callback：完成验证后调用的回调函数。它期望传递一组Error实例来指示验证失败。如果检查是同步的，您可以直接返回false或Error或Error Array。
• source：传递给validate方法的源对象。
• options： 附加选项。
• options.messages：包含验证错误消息的对象将与defaultMessages深度合并。