标题：*
140 字

TAG标签：（用空格隔开）
30 字

恢复历史版本：

HTML转MD HTML转MD2

<h2>验证通过与否除了跟validity接口下的属性相关外，还跟validationMessage是否有值有关系。只有当validity接口下的属性（customError除外）都为false并且validationMessage为空时才算验证通过。</h2> HTML5表单验证给前端人员带来了便利，但是在用户体验上存在一些缺陷，默认的提示对用户很不友好，无法准确的获取想要的信息。好在大牛们在接口设计的时候提供了setCustomValidilty方法可以自定义提示信息。这是一个好消息，但也存在一些弊端，需要让开人员做额外的一些处理才达到真正想要的目的。接下来通过以下示例来阐述方法的应用。未调用setCustomValidity()方法<pre class="prettyprint prettyprinted" style="padding: 3px; font-family: Consolas, Menlo, Monaco, " lucida="" liberation="" dejavu="" sans="" bitstream="" vera="" courier="" margin-bottom:="" background-color:="" overflow:="" width:="" font-size:="" line-height:="" border-radius:="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form&nbsp;test&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Check</pre>执行结果：A：未输入数据 <img alt="" class="alignnone size-full wp-image-3608" height="92" src="/ueditor/php/upload/image/20180606/1528221323587219.jpg" title="1336530769_26" width="251"/>B：不匹配 <img alt="" class="alignnone size-full wp-image-3609" height="102" src="/ueditor/php/upload/image/20180606/1528221325853680.jpg" title="1336530790_16" width="278"/> 这两个结果都匹配了。但是不匹配这里的提示方案案与预想的不符合。通过调用setCustomValidity方法来优化提示文案<pre class="prettyprint prettyprinted" style="padding: 3px; font-family: Consolas, Menlo, Monaco, " lucida="" liberation="" dejavu="" sans="" bitstream="" vera="" courier="" margin-bottom:="" background-color:="" overflow:="" width:="" font-size:="" line-height:="" border-radius:="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form&nbsp;test&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Check</pre>执行结果：A：为空 <img alt="" class="alignnone size-full wp-image-3607" height="96" src="/ueditor/php/upload/image/20180606/1528221326721133.jpg" title="1336531076_33" width="243"/> B：不合法 <img alt="" class="alignnone size-full wp-image-3610" height="89" src="/ueditor/php/upload/image/20180606/1528221328686366.jpg" title="1336531092_68" width="250"/> C：合法 <img alt="" class="alignnone size-full wp-image-3611" height="101" src="/ueditor/php/upload/image/20180606/1528221330680068.jpg" title="1336531105_8" width="255"/>从三个操作来看，调用了setCustomValidity方法后，原生的表单验证罗辑都返回false了。悲剧。再看看接口属性的变化 调用之前： A） <img alt="" class="alignnone size-full wp-image-3612" height="160" src="/ueditor/php/upload/image/20180606/1528221331429476.jpg" title="1336531622_37" width="317"/> B) <img alt="" class="alignnone size-full wp-image-3613" height="159" src="/ueditor/php/upload/image/20180606/1528221333736134.jpg" title="1336531668_55" width="366"/> C) <img alt="" class="alignnone size-full wp-image-3614" height="169" src="/ueditor/php/upload/image/20180606/1528221334780505.jpg" title="1336531785_56" width="237"/>调用之后： A) <img alt="" class="alignnone size-full wp-image-3615" height="162" src="/ueditor/php/upload/image/20180606/1528221335971428.jpg" title="1336531871_90" width="295"/> B) <img alt="" class="alignnone size-full wp-image-3616" height="176" src="/ueditor/php/upload/image/20180606/1528221337109502.jpg" title="1336531922_37" width="333"/> C) <img alt="" class="alignnone size-full wp-image-3617" height="170" src="/ueditor/php/upload/image/20180606/1528221338102457.jpg" title="1336531977_93" width="315"/> 从上面的截图可以看到validationMessage没清空，valueMissing和patternMismatch都已经验证通了。总结一下： 从面上可以看出，验证通过与否除了跟validity接口下的属性相关外，还跟validationMessage是否有值有关系。只有当validity接口下的属性（customError除外）都为false并且validationMessage为空时才算验证通过。优化后的代码：<pre class="brush:html;toolbar:false">&lt;!DOCTYPE&nbsp;html&gt;&lt;html&gt;&lt;head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;mata&nbsp;charset=&quot;utf-8&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;form&nbsp;test&lt;/title&gt;&lt;/head&gt;&lt;body&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;form&nbsp;name=&quot;test&quot;&nbsp;action=&quot;.&quot;&nbsp;method=&quot;post&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;required&nbsp;pattern=&quot;^\d{4}$&quot;&nbsp;oninput=&quot;out(this)&quot;&nbsp;placeholder=&quot;请输入代码&quot;&nbsp;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;submit&quot;&gt;Check&lt;/button&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;function&nbsp;out(i){
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;v&nbsp;=&nbsp;i.validity;
&nbsp;&nbsp;&nbsp;&nbsp;if(true&nbsp;===&nbsp;v.valueMessing){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i.setCustomValidity(&quot;请填写些字段&quot;);
&nbsp;&nbsp;&nbsp;&nbsp;}else{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(true&nbsp;===&nbsp;v.patternMismatch){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i.setCustomValidity(&quot;请输入4位数字的代码&quot;);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i.setCustomValidity(&quot;&quot;);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>