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

news/2024/7/9 23:38:48 标签: element, vue, 校验, 非必填

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

不填-> 提示应该要填写

填写-> 对了 -> 框变绿

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

 

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

不填-> 不校验

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

填了删除-> 不校验

 

方法一、自定义校验规则

  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实例来指示验证失败。如果检查是同步的,您可以直接返回falseErrorError Array
  • source:传递给validate方法的源对象。
  • options: 附加选项。
  • options.messages:包含验证错误消息的对象将与defaultMessages深度合并。

http://www.niftyadmin.cn/n/1284261.html

相关文章

快速学习Oracle-单行函数

1. 字符函数 接收字符输入返回字符或者数值,dual 是伪表 把小写的字符转换成大小的字符 upper(smith)把大写字符变成小写字符 lower(SMITH)2. 数值函数 四舍五入函数:ROUND() 默认情况下 ROUND 四舍五入取整,可以自己指定保留的位数。 …

一个容易误解的小问题:TextBox的EnableViewState为false后,为什么点击按钮PostBack,TextBox的内容还是会保持(Persist)?...

Page对象的EnableViewState属性为false&#xff0c;意味着整个页面&#xff08;包括其中的所有服务器端控件&#xff09;的ViewState被禁用&#xff0c;但是<input type"hidden" name"__VIEWSTATE" value"...." />并不消失&#xff0c;这个…

配置库用户_Mysql相互复制(互为主从)详细配置步骤

文章目录前言1. 设置数据库的配置文件库1&#xff1a;库22. 进入数据库创建从账号库1&#xff1a;库2&#xff1a;3. 查看生成的binlog日志&#xff0c;记录下来日志名字和起始位置。库1&#xff1a;库2&#xff1a;4. 进入数据库进行从读设置&#xff0c;指定要读的主服务库的…

在.NET中用不用htc

.net很多特性会反复的刷新页面&#xff0c;实际上在局域网内还没什么问题&#xff0c;如果在internet上&#xff0c;那用户体验就比较差。所以很多还是借助客户端的jscript去做比较好&#xff0c;那么封装成HTC就是一个非常好的主意。 比如验证模块&#xff0c;这个在.net中也有…

如何查询buckets更新_更好的理解 MySQL(1):查询和更新的内部实现

摘要在MySQL中&#xff0c;简单的CURD是很容易上手的。但是&#xff0c;理解CURD的背后发生了什么&#xff0c;却是一件特别困难的事情。在这一篇的内容中&#xff0c;我将简单介绍一下MySQL的架构是什么样的&#xff0c;分别有什么样的功能。然后再简单介绍一下在我们执行简单…

快速学习Oracle-多行函数(聚合函数)

1.统计记录数 count() 范例&#xff1a;查询出所有员工的记录数 注意:不建议使用 count(*)&#xff0c;可以使用一个具体的列以免影响性能。 2.最小值查询 min() 范例&#xff1a;查询出来员工最低工资 3.最大值查询 max() 范例&#xff1a;查询出员工的最高工资 4.查询…

应用ADO.net得到系统表信息

---------------------------------------------------------- 开发者&#xff1a;赵玉 开发时间&#xff1a;2005.1.13 功能&#xff1a;应用ADO.net得到表 ---------------------------------------------------------- Imports Zy_DataAccess Imports System Imports System…

快速学习Oracle-分组统计

分组统计需要使用 GROUP BY 来分组 语法&#xff1a; SELECT * |列名 FROM 表名 {WEHRE 查询条件} {GROUP BY 分组字段} ORDER BY 列 名 1 ASC|DESC&#xff0c;列名 2...ASC|DESC范例&#xff1a;查询每个部门的人数 范例&#xff1a;查询出每个部门的平均工资 如果我们想查…