HTML5利用约束验证API来检查表单的输入数据的代码实例

2024-08-26 00:19:18

字体：大中小

来源：转载

供稿：网友

HTML5对于表单有着极大程度的优化，无论是语义，小部件，还是数据格式的验证。我猜你肯定会以浏览器兼容作为借口不愿意使用这些“新功能”，但这绝不应该成为使你停滞不前的原因，况且还有像Modernizr和ployfill这样的工具库帮助你在不支持Html5的浏览器上进行回退处理。当你真正试着使用这些表单的新功能时，我保证你会爱上它。如果说唯一的缺陷，就是提示框的样式是浏览器默认的，你无法改变，好吧，如果你相信浏览器厂商的设计师的审美水平的话（我相信他们的设计水平比绝大部分普通人要好，如果不考虑风格兼容的话），抓紧学就对了！

原生验证

input type

HTML5中为数据格式验证提供了很多原生的支持，例如：

<input type='email'/>

当点击提交按钮时，如果你输入的格式不符合email，则会导致无法提交，浏览器会提示你错误信息。

比如在chrome下：

html5表单提交验证,html5,表单验证,提示,html5的表单验证

注意：

1、仅当你提交的时候会触发浏览器的验证

2、不同浏览器提示信息的行为样式不一样

3、当有多个input不符合要求时，只会提示一个错误，一般会提示表单中相对较前的Input的

不要理所应当的认为当input的type等于tel的时候，如果你输入的不是电话号码格式，在提交时也会被浏览器的阻挡并提示错误信息，type=’tel’在PC端只起到语义的作用，在移动端可以使产生的键盘为纯数字键盘，并不能起到数据验证的作用。

pattern

你可以使用pattern属性来对浏览器不提供原生验证的数据格式设置自定义格式验证。pattern属性的值是一个正则表达式（字符串）：

<input type='tel' pattern='[0-9]{11}'        if(this.value.length > 3){ // 判断条件完全自定义            input.setCustomValidity('格式不正确');        }else {            input.setCustomValidity('')        } });

每次键盘输入，代码都会判断格式是否正确，然后调用setCustomValidity设置validationMessage的值。不要妄想每按下键浏览器都会提示你结果是否正确，浏览器只有在点击提交按钮的时候才会提示validationMessage里的值（如果有的话）。

如果你还没有走思的话，一定会问，既然这样，为什么要为input绑定键盘事件，每输入一下都要进行判断呢？直接为表单绑定提交事件，在提交时再判断多好，别急，这么做是有好处的。

随着输入判断格式与样式

作为用户，我们当然想在得知我输入了错误的格式之后，文本框变红（或者有别的提示）。而在我每次输入一个字符，如果对了，文本框就恢复正常。我们可以使用CSS伪类来实现这个功能：

    input:required {            background-color: #FFE14D;        }    /*这个伪类通过validationMessage属性进行判断*/    input:invalid {        border: 2px solid red;    }

上面的required伪类会给所以必填但值空的input提供一个黄色的背景色，而下面的invalid伪类则会为所有未通过验证的input添加一个2px的红边边。我们现在给我们的Input框加上input类即可。

这些伪类的判断条件正与浏览器判断你能否提交表单的条件一样，看validationMessage里的值，所以，我们上面设置每次键盘输入事件都会触发一次判断从而改变CSS伪类样式的渲染，用意正在于此。

更好的用户体验

还有一个缺点，就是当一个input设置为required的时候，在初始化时，因为其本身是空的，所以invalid伪类会对它起作用，这不是我们想看到的，因为我们什么还都没有干。

我们可以并在这些伪类前加上父选择器.invalid，这样，只有在父元素具有invalid类时，这些伪类才会起作用。可以设置一个submit事件，在表单提交因验证失败后，会触发input的invalid事件，给form添加invalid类：

form.addEventListener('invalid'， function() {this.className = 'invalid'}， true)因为invaild是Input的事件，而不是form的事件，所以这里我们设置第三个参数为true采用事件捕获的方式处理之。这样，就大功告成了。

最终实例

好了，现在是时候总结一下我们所学的知识并创造最佳实践了：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>form</title>    <style>        input:required{            background-color: #DCD4CE;        }        .invalid input:invalid{            border: 2px solid red;        }    </style></head><body><form id="form">    <label>email:<input type="email" required id="email"></label>    <label>IDCard:<input required id="IDCard"></label>    <input type="submit" id="submit"></form><script>    var email = document.getElementById('email');    var IDCard = document.getElementById('IDCard');    var form = document.getElementById('form');    IDCard.addEventListener('input', function () {        if(this.value.length != 6) {            this.setCustomValidity('IDCard的长度必须为6')        }else{            this.setCustomValidity('')        }    });    form.addEventListener('invalid', function () {        this.className = 'invalid';    }, true)</script></body></html>

运行后截图如下：

html5表单提交验证,html5,表单验证,提示,html5的表单验证