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

网页制作 2024/11/16 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

原生验证

input type

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

<input type='email'/>

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

比如在chrome下：

注意：

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

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

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

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

pattern

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

<input type='tel' pattern='[0-9]{11}' title='请输入11位电话号码'>

点击提交时，如果你输入的数据不符合pattern里面正则的格式，那么浏览器会阻止表单提交，并提示：‘请与所请求的格式保持一致’+ title里的内容（小字）。但注意，当你的文本框中内容为空的时候，浏览器不会对其进行检查，会直接提交表单（因为浏览器认为这个框框不是必填项）。如果你想要这个框框必须有内容，请加上required属性。

通过HTML原生的验证系统，基本就能满足我们对表单提交的限定。但HTML5提供了更高级的功能来方便我们开发和提升用户体验。

约束验证API

默认提示信息

像‘请与所请求的格式保持一致’这样的浏览器提示信息字串藏在input DOM对象的validationMessage属性里，这个属性在大多数现代的浏览器中是只读的，即不可修改，比如下面的代码：

<input type="text" required id='input'/>

当提交时，如果Input内容为空，那么浏览器会提示‘请填写此字段’，我们可以在控制台把这句话打印出来：

var input = document.getElementById('input')
input.validationMessage // =>'请填写此字段'

如果想修改其中的内容，可以调用setCustomValidity接口改变validationMessage的值

input.setCustomValidity('这个字段必须填上哦');
// 下面这种做法适用于不支持setCustomValidity的浏览器，基本现代浏览器都不支持这样做
input.validationMessage = '这个字段必须填上哦'

注意，像required这样的HTML原生验证，虽然能改变其中信息，但无法把信息置为空字串，原因下面会讲到。

原理

HTML表单验证系统通过validationMessage属性检测该文本框的数据是否通过验证，如果其值为空字串，则表示通过了验证，否则，表示未通过，浏览器会把其值作为错误信息提示给用户。所以在原生验证时，用户无法把validationMessage的值设置为空字符串。

约束验证API的简单实例

约束验证API是在原生方法之上更灵活的表达方式，你可以自己设置数据是否通过，而不借助于正则表达式。原理很简单，通过if判断，如果数据格式使你满意，那么你就调用setCustomValidity使validationMessage的值为空，否则，你就调用setCustomValidity传入错误信息：

input.addEventListener('input', function () {
        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的表单验证

标签：

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

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

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

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

www.ioogu.com 极乐门资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

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

详解前端HTML5几种存储方式的总结

基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

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

详解前端HTML5几种存储方式的总结

基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存