猫咪老师君

HTML5表单自定义验证setCustomValidity

不知道:

HTML5表单验证给前端开发带来许多便利,但是默认的提示不友好。我们可以通过setCustomValidity方法来自定义提示信息,更准确的提示给用户。

先来看看未使用setCustomValidity()方法的实现:


A: 输入内容为空


对应的接口属性值:


B: 输入内容不符合规则的结果


对应接口属性值:


C: 输入内容符合规则的结果


对应接口的属性值:


三种情况都正确验证,但B情况提示的信息不是我们想要的。下面我们就通过setCustomValidity方法来自定义B情况的提示信息,代码如下:


A:输入内容为空


对应接口属性值:


B: 输入内容不符合规则


对应接口属性值:


C: 输入符合规则


对应接口属性值:


不管怎么样,ABC三种情况都显示一样的提示,从两个C情况的接口属性值对比来看,调用setCustomValidity时validationMessage没清空(正确值应为空),customError值为true(正确值为false),valid值为false(正确值为true)。所以只有validity下的属性值(除valid外)都为false并validationMessage为空时才算验证通过。

优化后的代码 :


评论

热度(8)

  1. 猫咪老师君不知道 转载了此文字