表单中HTML5约束验证API实现方法及应用实例

发布时间：2022/01/10 丨 文章来源：未知 丨 浏览次数：

为了在将表单提交到服务器之前验证数据，HTML5新增了一些功能。有了这些功能，即便 JavaScript 被禁用或者由于种种原因未能加载，也可以确保基本的验证。换句话说，浏览器自己会根据标记中的规 则执行验证，然后自己显示适当的错误消息（完全不用 JavaScript 插手）。当然，这个功能只有在支持 HTML5这部分内容的浏览器中才有效，这些浏览器有 Firefox 4+、Safari 5+、Chrome和 Opera 10+。?
? ? ? ? 只有在某些情况下表单字段才能进行自动验证。具体来说，就是要在 HTML 标记中为特定的字段 指定一些约束，然后浏览器才会自动执行表单验证。?
? ? ? ?1. 必填字段?
? ? ? ?第一种情况是在表单字段中指定了 required 属性，如下面的例子所示：?

? ? ? ?任何标注有 required 的字段，在提交表单时都不能空着。这个属性适用于、 和<select>字段（Opera 11及之前版本还不支持<select>的 required 属性）。在 JavaScript中，通过 对应的 required 属性，可以检查某个表单字段是否为必填字段。?<br /> ? ? ? ?var isUsernameRequired = document.forms[0].elements["username"].required;?<br /> ? ? ? ?另外，使用下面这行代码可以测试浏览器是否支持 required 属性。?<br /> ? ? ? ?var isRequiredSupported = "required" in document.createElement("input");?<br /> ? ? ? ?以上代码通过特性检测来确定新创建的<input>元素中是否存在 required 属性。 对于空着的必填字段，不同浏览器有不同的处理方式。Firefox 4和 Opera 11会阻止表单提交并在相 应字段下方弹出帮助框，而 Safari（5之前）和 Chrome（9之前）则什么也不做，而且也不阻止表单提 交。?<br /> ? ? ? ?<strong>2. 其他输入类型</strong><br /> ? ? ? ? HTML5为<input>元素的 type 属性又增加了几个值。这些新的类型不仅能反映数据类型的信息， 而且还能提供一些默认的验证功能。其中，"email"和"url"是两个得到支持多的类型，各浏览器也 都为它们增加了定制的验证机制。例如：?<br /> <input type="email" name ="email"><br /> ? ? ? ? <input type="url" name="homepage">?<br /> ? ? ? ?顾名思义，"email"类型要求输入的文本必须符合电子邮件地址的模式，而"url"类型要求输入的 文本必须符合 URL 的模式。不过，本节前面提到的浏览器在恰当地匹配模式方面都存在问题。明显 的是"-@-"会被当成一个有效的电子邮件地址。浏览器开发商还在解决这些问题。?<br /> ? ? ? ?要检测浏览器是否支持这些新类型，可以在 JavaScript 创建一个<input>元素，然后将 type 属性 设置为"email"或"url"，后再检测这个属性的值。不支持它们的旧版本浏览器会自动将未知的值设 置为"text"，而支持的浏览器则会返回正确的值。例如：?<br /> ? ? ? ?var input = document.createElement("input"); input.type = "email";?<br /> ? ? ? ?var isEmailSupported = (input.type == "email");?<br /> ? ? ? ?要注意的是，如果不给<input>元素设置 required 属性，那么空文本框也会验证通过。另一方面， 设置特定的输入类型并不能阻止用户输入无效的值，只是应用某些默认的验证而已。?<br /> ? ? ? ?<strong>3. 数值范围</strong><br /> ? ? ? ?除了"email"和"url"，HTML5 还定义了另外几个输入元素。这几个元素都要求填写某种基于数<br /> 字的值："number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week"， 还有"time"。浏览器对这几个类型的支持情况并不好，因此如果真想选用的话，要特别小心。目前， 浏览器开发商主要关注更好的跨平台兼容性以及更多的逻辑功能。因此，本文介绍的内容某种程度上有 些超前，不一定马上就能在实际开发中使用。?<br /> ? ? ? ?对所有这些数值类型的输入元素，可以指定 min 属性（小的可能值）、max 属性（大的可能值） 和 step 属性（从 min 到 max 的两个刻度间的差值）。例如，想让用户只能输入 0到 100的值，而且这 个值必须是 5的倍数，可以这样写代码：?<br /> ? ? ? ?<input type="number" min="0" max="100" step="5" name="count"> ? ? ??<br /> 在不同的浏览器中，可能会也可能不会看到能够自动递增和递减的数值调节按钮（向上和向下按 钮）。?<br /> ? ? ? ?以上这些属性在 JavaScript中都能通过对应的元素访问（或修改）。此外，南昌网络公司网络工程告诉大家还有两个方法：stepUp() 和 stepDown()，都接收一个可选的参数：要在当前值基础上加上或减去的数值。（默认是加或减 1。） 这两个方法还没有得到任何浏览器支持，但下面的例子演示了它们的用法。?<br /> ? ? ? ?input.stepUp(); //加 1<br /> ? ? ? ? input.stepUp(5); //加 5<br /> ? ? ? ? input.stepDown(); //减 1<br /> ? ? ? ? input.stepDown(10); //减 10?<br /> <strong>4. 输入模式</strong><br /> ? ? ? ? HTML5为文本字段新增了 pattern 属性。这个属性的值是一个正则表达式，用于匹配文本框中的 值。例如，如果只想允许在文本字段中输入数值，可以像下面的代码一样应用约束：?<br /> ? ? ? ?<input type="text" pattern="d+" name="count">?<br /> ? ? ? ?注意，模式的开头和末尾不用加^和$符号（假定已经有了）。这两个符号表示输入的值必须从头到 尾都与模式匹配。?<br /> ? ? ? ?与其他输入类型相似，指定 pattern 也不能阻止用户输入无效的文本。这个模式应用给值，浏览 器来判断值是有效，还是无效。在 JavaScript中可以通过 pattern 属性访问模式。?<br /> ? ? ? ?var pattern = document.forms[0].elements["count"].pattern;?<br /> ? ? ? ?使用以下代码可以检测浏览器是否支持 pattern 属性。?<br /> ? ? ? ?var isPatternSupported = "pattern" in document.createElement("input");?<br /> <strong>5. 检测有效性</strong><br /> ? ? ? ? 使用 checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有个方法，如 果字段的值有效，这个方法返回 true，否则返回 false。字段的值是否有效的判断依据是本节前面介 绍过的那些约束。换句话说，必填字段中如果没有值就是无效的，而字段中的值与 pattern 属性不匹 配也是无效的。例如：?<br /> if (document.forms[0].elements[0].checkValidity()){ //字段有效，继续 } else { //字段无效 }?<br /> ? ? ? ?要检测整个表单是否有效，可以在表单自身调用 checkValidity()方法。如果所有表单字段都有 效，这个方法返回 true；即使有一个字段无效，这个方法也会返回 false。?<br /> if(document.forms[0].checkValidity()){<br /> ? ? ? ? //表单有效，继续 } else {?<br /> ? ? ? ?//表单无效?<br /> ? ? ? ?}?<br /> ? ? ? ?与 checkValidity()方法简单地告诉你字段是否有效相比，validity 属性则会告诉你为什么字 段有效或无效。这个对象中包含一系列属性，每个属性会返回一个布尔值。?<br /> ? ? ? ?ustomError ：如果设置了 setCustomValidity()，则为 true，否则返回 false。 ?<br /> ? ? ? ?patternMismatch：如果值与指定的 pattern 属性不匹配，返回 true。?<br /> ? ? ? ?rangeOverflow：如果值比 max 值大，返回 true。?<br /> ? ? ? ?rangeUnderflow：如果值比 min 值小，返回 true。?<br /> ? ? ? ?stepMisMatch：如果 min 和max 之间的步长值不合理，返回 true。?<br /> ? ? ? ?tooLong：如果值的长度超过了 maxlength 属性指定的长度，返回 true。有的浏览器（如Firefox 4） 会自动约束字符数量，因此这个值可能永远都返回 false。?<br /> ? ? ? ? typeMismatch：如果值不是"mail"或"url"要求的格式，返回 true。?<br /> ? ? ? ?valid：如果这里的其他属性都是 false，返回 true。checkValidity()也要求相同的值。?<br /> ? ? ? ? valueMissing：如果标注为 required 的字段中没有值，返回 true。 因此，要南昌app开发公司网络工程师提示想得到更具体的信息，就应该使用 validity 属性来检测表单的有效性。下面是一个例子。?<br /> <br /> if (input.validity && !input.validity.valid){<br /> ? ? ? ? if (input.validity.valueMissing){?<br /> ? ? ? ? ? ? ? alert("Please specify a value.")<br /> ? ? ? ? } else if (input.validity.typeMismatch){<br /> ? ? ? ? ? ? ? ?alert("Please enter an email address.");?<br /> ? ? ? ?} else {?<br /> ? ? ? ? ? ? ? alert("Value is invalid.");<br /> ? ? ? ? }<br /> ? ? ? ? }?<br /> <br /> <strong>6. 禁用验证</strong>?<br /> ? ? ? ?通过设置 novalidate 属性，可以告诉表单不进行验证。?<br /> ? ? ? ?<form method="post" action="signup.php" novalidate>?<br /> ? ? ? ? ? ? ? <!--这里插入表单元素-->?<br /> ? ? ? ?</form>?<br /> ? ? ? ?在 JavaScript中使用 noValidate 属性可以取得或设置这个值，如果这个属性存在，值为 true， 如果不存在，值为 false。?<br /> document.forms[0].noValidate = true; //禁用验证?<br /> ? ? ? ?如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上 添加 formnovalidate 属性。?<br /> <form method="post" action="foo.php">?<br /> ? ? ? ?<!--这里插入表单元素--><br /> ? ? ? ? <input type="submit" value="Regular Submit">?<br /> ? ? ? ? <input type="submit" formnovalidate name="btnNoValidate"<br /> ? ? ? ? ? ? ? ?value="Non-validating Submit"><br /> ? ? ? ? </form><br /> ? ? ? ?在这个例子中，点击第一个提交按钮会像往常一样验证表单，而点击第二个按钮则会不经过验证而 提交表单。使用 JavaScript也可以设置这个属性。?<br /> //禁用验证 document.forms[0].elements["btnNoValidate"].formNoValidate = true;?<br /> ? ?本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌APP开发公司-网络 <a href="http://www.huicuiwang.cn/" target="_blank">http://www.huicuiwang.cn/</a> 如转载请注明出处! </p> </div> <p>PS：所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！</p> <div class="page_back"> <div> 上一篇：<a href='/xingyezixun/2022011017401.html'>深圳网站设计一尘互联【多少钱】</a> </div> <div> 下一篇：<a href='/xingyezixun/2022011017403.html'>社区生活APP开发满足用户的生活需求</a> </div> <span class="bapage_back_up"><a href="/xingyezixun/">返回列表页</a></span> </div> <!-------翻页 END---------> </div> </div> <!------------main END------------> <div id="foot_bg"> <div id="foot" class="warp"> <div class="copy"> <p>Copyright © 20019-2023 荟萃信息网 版权所有 <a href="http://www.beian.miit.gov.cn">蜀ICP备16021156号-2</a> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?92d475e604c0b54a22f1d6b404ad6885"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script>(function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/84b2462dfe3afd083ae49ea91593c7fe5/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();</script></p> <p>电 话：0    手 机：0    传 真：    E-mail：2074917417@qq.com</p> <p>地 址：成都市金牛区 </p> <p>技术支持：<a href="/" target="_blank">荟萃网络科技</a>   </p> </div> <div class="foot_erweima"><img src="/skin/img/weixin.jpg"/> <p>扫码关注我们</p> </div> </div> </div> <div id="foot_nav_bg"> <div class="warp foot_nav"><a href="/">网站首页</a> | <a href="/app/">app开发</a>| <a href="/Development/">小程序开发</a>| <a href="/sem/">SEM竞价托管</a>| <a href="/xingyezixun/">行业资讯</a> </div> </div> <!-------------------------> <div class="toolbar"> <a href="javascript:;" class="toolbar-item toolbar-item-weixin"><span class="toolbar-layer"> <p>扫码关注我们</p> <img src="/skin/img/weixin.jpg"/></span></a> <a href="http://wpa.qq.com/msgrd?v=3&site=&menu=yes&uin=2074917417" target="_blank" class="toolbar-item toolbar-item-kefu"></a> <a href="javascript:scroll(0,0)" id="top" class="toolbar-item toolbar-item-top"></a> </div> <?php include_once("baidu_js_push.php") ?> </body> </html>