HTML5利用约束验证API来检查表单的输入数据的代码实例 -H5教程-PHP中文网

首页

web前端

H5教程

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

黄舟

May 14, 2018 pm 04:30 PM

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

<input type=&#39;email&#39;/>

当点击提交按钮时，如果你输入的格式不符合email，则会导致无法提交，浏览器会提示你错误信息。
比如在chrome下：
HTML5利用约束验证API来检查表单的输入数据的代码实例
注意：
1、仅当你提交的时候会触发浏览器的验证
2、不同浏览器提示信息的行为样式不一样
3、当有多个input不符合要求时，只会提示一个错误，一般会提示表单中相对较前的Input的
不要理所应当的认为当input的type等于tel的时候，如果你输入的不是电话号码格式，在提交时也会被浏览器的阻挡并提示错误信息，type=’tel’在PC端只起到语义的作用，在移动端可以使产生的键盘为纯数字键盘，并不能起到数据验证的作用。
pattern
你可以使用pattern属性来对浏览器不提供原生验证的数据格式设置自定义格式验证。pattern属性的值是一个正则表达式（字符串）：

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

点击提交时，如果你输入的数据不符合pattern里面正则的格式，那么浏览器会阻止表单提交，并提示：‘请与所请求的格式保持一致’+ title里的内容（小字）。但注意，当你的文本框中内容为空的时候，浏览器不会对其进行检查，会直接提交表单（因为浏览器认为这个框框不是必填项）。如果你想要这个框框必须有内容，请加上required属性。
通过HTML原生的验证系统，基本就能满足我们对表单提交的限定。但HTML5提供了更高级的功能来方便我们开发和提升用户体验。
约束验证API
默认提示信息
像‘请与所请求的格式保持一致’这样的浏览器提示信息字串藏在input DOM对象的validationMessage属性里，这个属性在大多数现代的浏览器中是只读的，即不可修改，比如下面的代码：

<input type="text" required id=&#39;input&#39;/>

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

var input = document.getElementById(&#39;input&#39;)
input.validationMessage // =>&#39;请填写此字段&#39;

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

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

注意，像required这样的HTML原生验证，虽然能改变其中信息，但无法把信息置为空字串，原因下面会讲到。
原理
HTML表单验证系统通过validationMessage属性检测该文本框的数据是否通过验证，如果其值为空字串，则表示通过了验证，否则，表示未通过，浏览器会把其值作为错误信息提示给用户。所以在原生验证时，用户无法把validationMessage的值设置为空字符串。
约束验证API的简单实例
约束验证API是在原生方法之上更灵活的表达方式，你可以自己设置数据是否通过，而不借助于正则表达式。原理很简单，通过if判断，如果数据格式使你满意，那么你就调用setCustomValidity使validationMessage的值为空，否则，你就调用setCustomValidity传入错误信息：

input.addEventListener(&#39;input&#39;, function () {
        if(this.value.length > 3){ // 判断条件完全自定义
            input.setCustomValidity(&#39;格式不正确&#39;);
        }else {
            input.setCustomValidity(&#39;&#39;)
        }
 });

每次键盘输入，代码都会判断格式是否正确，然后调用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(&#39;email&#39;);
    var IDCard = document.getElementById(&#39;IDCard&#39;);
    var form = document.getElementById(&#39;form&#39;);

    IDCard.addEventListener(&#39;input&#39;, function () {
        if(this.value.length != 6) {
            this.setCustomValidity(&#39;IDCard的长度必须为6&#39;)
        }else{
            this.setCustomValidity(&#39;&#39;)
        }
    });

    form.addEventListener(&#39;invalid&#39;, function () {
        this.className = &#39;invalid&#39;;
    }, true)
</script>
</body>
</html>

运行后截图如下：

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

以上就是HTML5利用约束验证API来检查表单的输入数据的代码实例的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5：探索最新版本的HTMLMay 03, 2025 am 12:14 AM

html5isamajorrevisionofthehtmlStandardThatRevolutionsWebDevelopmentBybyIntroDucingNewSemanticeLementSemelementsandAndCapabilities.1）itenhancesCodereAdabilityAndSeowitability andSeowithelientsLike，and.2）

超越基础：H5代码中的高级技术May 02, 2025 am 12:03 AM

H5的高级技巧包括：1.利用进行复杂图形绘制，2.使用WebWorkers提升性能，3.通过WebStorage增强用户体验，4.实现响应式设计，5.利用WebRTC实现实时通信，6.进行性能优化和最佳实践。这些技巧帮助开发者构建更动态、互动和高效的Web应用。

H5：网络内容和设计的未来May 01, 2025 am 12:12 AM

H5（HTML5）将通过新元素和API提升网页内容和设计。1）H5增强了语义化标记和多媒体支持。2）它引入了Canvas和SVG，丰富了网页设计。3）H5的工作原理是通过新标签和API扩展HTML功能。4）基本用法包括使用创建图形，高级用法涉及WebStorageAPI。5）开发者需注意浏览器兼容性和性能优化。

H5：网络开发的新功能和功能Apr 29, 2025 am 12:07 AM

H5带来了多项新功能和能力，极大提升了网页的互动性和开发效率。1.语义化标签如、增强了SEO。2.多媒体支持通过和标签简化了音视频播放。3.Canvas绘图提供了动态图形绘制工具。4.本地存储通过localStorage和sessionStorage简化了数据存储。5.地理位置API便于开发基于位置的服务。

H5：HTML5的关键改进Apr 28, 2025 am 12:26 AM

HTML5带来了五个关键改进：1.语义化标签提升了代码清晰度和SEO效果；2.多媒体支持简化了视频和音频嵌入；3.表单增强简化了验证；4.离线与本地存储提高了用户体验；5.画布与图形功能增强了网页的可视化效果。

HTML5：标准及其对Web开发的影响Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括语义化标签、多媒体支持、离线存储与本地存储、表单增强。1.语义化标签如、等，提升代码可读性和SEO效果。2.和标签简化多媒体嵌入。3.离线存储和本地存储如ApplicationCache和LocalStorage，支持无网络运行和数据存储。4.表单增强引入新输入类型和验证属性，简化处理和验证。