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

为了在将表单提交到服务器之前验证数据，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.jxbh.cn/" target="_blank">http://www.jxbh.cn/</a> 如转载请注明出处! </p> </div> </div> <div class="article-pager"> <ul> <li class="article-top"><a href="https://www.jxbh.cn/article/1885.html"><span class="icon icon-menu-left"></span> 上一篇</a></li> <li class="article-back"><a href="https://www.jxbh.cn/knowledge/index.html"><span class="icon icon-list"></span> 返回列表</a></li> <li class="article-next"><a href="https://www.jxbh.cn/article/1877.html">下一篇 <span class="icon icon-menu-right"></span></a></li> </ul> </div>  <div class="i-showpicture"> <div class="i-showpic-arrowleft"></div> <div class="i-showpic-picbox"> <div class="i-showpic-div"></div> </div> <div class="i-showpic-arrowright"></div> <div class="i-showpic-close animated"></div> <input type="hidden" value="0" id="pic-index"> </div>  <script type="text/javascript"> $(".article-content img").addClass("img-thumbnail"); $("body").on("click",".article-content img",function(e){ var cksub = 0; var $file = $(this).attr("src"); $(".i-showpic-pic").remove(); $("#pic-index").val(0); var w = $(window).width(); $(".i-showpic-picbox").css({"width":w+"px",'height':$(window).height()+'px'}); cmask(); var picObj = $(".article-content img"); if(picObj.length > 0) { $(".i-showpic-div").css({"width":w*picObj.length+"px",'height':$(window).height()+'px','left':0}); for(var i=0;i<picObj.length;i++) { if ($file == picObj.eq(i).attr('src')) cksub = i; $(".i-showpic-div").append('<div class="i-showpic-pic" style="width:'+w+'px;height:'+$(window).height()+'px;"><img src="'+picObj.eq(i).attr('src')+'" /></div>'); } setTimeout(function(){ for(var j=0;j<picObj.length;j++) { var imgs = picObj.eq(j).attr('src'); var image = new Image(); image.src = imgs; var pic_h = image.height; var pic_w = image.width; var h = parseInt($(window).height()); itop = 0; if( pic_h >= h ) { pic_w = ((h-50)/pic_h)*pic_w; pic_h = h-50; //高度 } itop = parseInt(parseInt(h-pic_h)/2); $(".i-showpic-pic").eq(j).find("img").css({"margin-top":itop+"px","width":pic_w+'px',"height":pic_h+'px','display':'block'}); if (cksub == j) { //选择的图片 $(".i-showpic-div").animate({"left":(0-w*(j))+"px"}); $("#pic-index").val(j); } } },400); } $(".i-showpic-arrowleft,.i-showpic-arrowright").show(); $(".i-showpicture").show(); }); //左右切换 $(".i-showpic-arrowright").click(function(e) { var w = $(window).width(); var i = parseInt($("#pic-index").val())+1; var l = $(".i-showpic-div .i-showpic-pic").length; if(i < l){ $(".i-showpic-div").animate({"left":(0-w*(i))+"px"}); $("#pic-index").val(i); } if (i==l){ $(".i-showpic-div").animate({"left":"0px"}); $("#pic-index").val(0); } }); $(".i-showpic-arrowleft").click(function(e) { var w = $(window).width(); var i = parseInt($("#pic-index").val())-1; if(i >= 0){ $(".i-showpic-div").animate({"left":(0-w*(i))+"px"}); $("#pic-index").val(i); } if ( $("#pic-index").val() == 0) { if($(".i-showpic-pic").length>2) { $(".i-showpic-div").animate({"left":(0-w*($(".i-showpic-pic").length-1))+"px"},500,function(){}); $("#pic-index").val($(".i-showpic-pic").length-1); } else if ($(".i-showpic-pic").length == 2 && (i+1) == 0){ $(".i-showpic-div").animate({"left":(0-w)+"px"},500,function(){}); $("#pic-index").val(1); } } }); //关闭大图显示器 $(document).on('click',function(e){ var target = $(e.target); if( target.closest(".i-showpic-picbox").length == 1 || target.closest(".i-showpic-arrowleft").length == 1 || target.closest(".i-showpic-arrowright").length == 1 || target.closest(".i-showpic").length == 1 || target.closest(".i-zoompic").length == 1 || target.closest(".article-content img").length == 1){ return false; } $(".cscreen").remove("*"); $(".i-showpicture").hide(300); }); $(".i-showpic-close").hover(function(e) { $(this).addClass('rotateIn'); },function(e){ $(this).removeClass('rotateIn'); }); </script> <div class="bh-footer"> <div class="footer-main"> <div class="bh-smenu"> <a href="https://www.jxbh.cn/index.html">首页</a> <a href="https://www.jxbh.cn/website/index.html">网站建设</a> <a href="https://www.jxbh.cn/apps/index.html">APP开发</a> <a href="https://www.jxbh.cn/promotion/index.html">全网营销</a> <a href="https://www.jxbh.cn/software/index.html">软件开发</a> <a href="https://www.jxbh.cn/case/index.html">经典案例</a> <a href="https://www.jxbh.cn/knowledge/index.html">网站知识</a> <a href="https://www.jxbh.cn/about/index.html">关于我们</a> <a href="https://www.jxbh.cn/contact/index.html">联系我们</a> <a href="http://www.jxid.cn/services/domain/" target="_blank" rel="nofollow">域名注册</a> <a href="http://www.jxid.cn/services/cloudhost/" target="_blank" rel="nofollow">云服务器</a> <a href="http://www.jxid.cn/services/webhosting/" target="_blank" rel="nofollow">虚拟主机</a> </div> <div class="bh-copyright"> Copyright @ 2006-2024 https://www.jxbh.cn Inc. All Rights resreved. <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=36010902000406" rel="nofollow"><img src="/public/home/images/icon/copyicon.png" style="position:relative; top:0px;" alt="赣公网安备案" title="赣公网安备案"> 赣公网安备36010902000406号</a> <a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">[赣ICP备17008688号-5]</a> <a href="/sitemap.xml" target="_blank" class="sitemap">网站地图</a> <span class="hide"><script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F290578c838837356a5dcbcbb971d7399' type='text/javascript'%3E%3C/script%3E")); </script></span> <a href="http://tongji.baidu.com/web/welcome/ico?s=290578c838837356a5dcbcbb971d7399" rel="nofollow" target="_blank"> <span class="icon icon-stats"></span> 百度统计</a> <a href="http://jigsaw.w3.org/css-validator/validator?lang=zh-cn&profile=css3svg&uri=https%3A%2F%2Fwww.jxbh.cn%2Fpublic%2Fhome%2Fcss%2Fcommon.css&usermedium=all&vextwarning=&warning=1" rel="nofollow" target="_blank"><img src="/public/home/images/icon/css.png" style="position: relative; top: 0px;" height="21" alt="南昌百恒网络公司通过W3C检验标准!" title="南昌百恒网络公司通过W3C标准验证!" /></a> </div> <div class="bh-copyright">我们专注于<a href="https://www.jxbh.cn/website/index.html" target="_blank">南昌网站建设</a>，<a href="https://www.jxbh.cn/apps/index.html">南昌APP开发</a>，<a href="https://www.jxbh.cn/xcx/index.html" target="_blank">南昌小程序开发</a>，等一站式互联网开发服务；<a href="https://www.jxbh.cn">南昌做网站</a>，<a href="https://www.jxbh.cn" target="_blank">南昌网络公司</a>就找<a href="https://www.jxbh.cn/about/index.html" target="_blank">百恒网络</a> </div> <div class="bh-shareicon"> <a href="" target="_blank"><div class="bh-sina" title="新浪微博"></div></a> <div class="bh-phone"> <div class="bh-a-b"></div> <div class="bh-phonehide">400-680-9298,0791-88117053</div> </div> <div class="bh-weixin" title="扫一扫关注百恒网络微信公众号"> <div class="bh-hideweixin"><img src="https://www.jxbh.cn/uploads/images/20211210/61b2c8180ee48.png" width="130" alt="扫一扫关注百恒网络微信公众号"></div> </div> <div class="bh-xiaochengxu" title="扫一扫打开百恒网络小程序"> <div class="bh-hidexiaochengxu"><img src="/public/home/images/weixin/bh-code.jpg" width="130" alt="扫一扫打开百恒网络小程序"></div> </div> </div> </div> </div> <div class="bh-fixright"> <a href="javascript:void(0);"><div class="bh-fixqq" title="点击QQ交谈"></div></a> <div class="bh-fixtel"> <div class="bh-fixhide"></div> <div class="bh-fixhidetel">400-680-9298,0791-88117053</div> </div> <a href="https://im.jxbh.cn/im.html" target="_blank"><div class="bh-baiduqiao" title="点击在线咨询"></div></a> <div class="bh-fixweixin"> <div class="bh-fixweixinhide"> <img src="https://www.jxbh.cn/uploads/images/20211210/61b2c8180ee48.png" width="135" alt="扫一扫关注百恒网络微信公众号"> </div> </div> <div class="bh-fixxiaochengxu"> <div class="bh-fixxiaochengxunhide"> <img src="/public/home/images/weixin/bh-code.jpg" width="135" alt="扫一扫打开百恒网络小程序"> </div> </div> <div class="bh-fixtop"></div> </div> <div class="bh-qiao"> <h2><span><font class="icon icon-comment"></font> 欢迎您的光顾，我们将竭诚为您服务</span><b>×</b></h2> <div class="qiao-main"> <iframe name="qiao" id="qiaoview" scrolling="no" frameborder="0" width="100%" height="100%" src="/home/cases/bhloading.html"></iframe> </div> </div> <div class="bh-qqonline"> <div class="bh-qq qq-success" title="点击联系我吧~"><a href="tencent://message/?uin=331355634&site=qq&menu=yes"><img src="/public/home/images/icon/qq-white-icon.png" height="16" alt="售前咨询"> 售前咨询</a></div> <div class="bh-qqline"> </div> <div class="bh-qq qq-success" title="点击联系我吧~"><a href="tencent://message/?uin=810194011&site=qq&menu=yes"><img src="/public/home/images/icon/qq-white-icon.png" height="16" alt="售前咨询"> 售前咨询</a></div> <div class="bh-qqline"> </div> <div class="bh-qq qq-success" title="点击联系我吧~"><a href="tencent://message/?uin=2262512779&site=qq&menu=yes"><img src="/public/home/images/icon/qq-white-icon.png" height="16" alt="售前咨询"> 售前咨询</a></div> <div class="bh-qqline"> </div> <div class="bh-qq qq-success" title="点击联系我吧~"><a href="tencent://message/?uin=1935167009&site=qq&menu=yes"><img src="/public/home/images/icon/qq-white-icon.png" height="16" alt="售前咨询"> 售前咨询</a></div> <div class="bh-qqline"> </div> <div class="bh-qq qq-success" title="点击联系我吧~"><a href="tencent://message/?uin=1785863228&site=qq&menu=yes"><img src="/public/home/images/icon/qq-white-icon.png" height="16" alt="售前咨询"> 售前咨询</a></div> <div class="bh-qqline"> </div> <div class="bh-qq qq-info" title="点击联系我吧~"><a href="tencent://message/?uin=88246706&site=qq&menu=yes"><img src="/public/home/images/icon/qq-white-icon.png" height="16" alt="售后服务"> 售后服务</a></div> <div class="bh-qqline"> </div> <div class="bh-qq qq-info" title="点击联系我吧~"><a href="tencent://message/?uin=331355634&site=qq&menu=yes"><img src="/public/home/images/icon/qq-white-icon.png" height="16" alt="售后服务"> 售后服务</a></div> <div class="bh-qqline"> </div> <div class="bh-qq qq-warning" title="点击联系我吧~"><a href="tencent://message/?uin=2878230710&site=qq&menu=yes"><img src="/public/home/images/icon/qq-white-icon.png" height="16" alt="备案专线"> 备案专线</a></div> <div class="bh-qqline"> </div> <div class="bh-qqclose" title="点我关闭哦">×</div> </div> <div class="bh-loading" title="数据加载中，请稍候..."> <div class="bh-loading-l"></div> <div class="bh-loading-r"></div> <div class="bh-loadin"></div> </div> <script type="text/javascript" src="/public/home/js/common.js?v=3.1.1"></script> <script> $.post('https://www.jxbh.cn/online/index.html', {}, function (res) {}, 'json'); </script> </body> </html>