十年专注于品牌网站建设 十年专注于品牌网站建设,低调、高逼格、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

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

百恒网络 2017-02-09 341

为了在将表单提交到服务器之前验证数据,HTML5新增了一些功能。有了这些功能,即便 JavaScript 被禁用或者由于种种原因未能加载,也可以确保基本的验证。换句话说,浏览器自己会根据标记中的规 则执行验证,然后自己显示适当的错误消息(完全不用 JavaScript 插手)。当然,这个功能只有在支持 HTML5这部分内容的浏览器中才有效,这些浏览器有 Firefox 4+、Safari 5+、Chrome和 Opera 10+。 
        只有在某些情况下表单字段才能进行自动验证。具体来说,就是要在 HTML 标记中为特定的字段 指定一些约束,然后浏览器才会自动执行表单验证。 
       1. 必填字段 
       第一种情况是在表单字段中指定了 required 属性,如下面的例子所示: 
<input type="text" name="username" required>
       任何标注有 required 的字段,在提交表单时都不能空着。这个属性适用于<input>、<textarea> 和<select>字段(Opera 11及之前版本还不支持<select>的 required 属性)。在 JavaScript中,通过 对应的 required 属性,可以检查某个表单字段是否为必填字段。 
       var isUsernameRequired = document.forms[0].elements["username"].required; 
       另外,使用下面这行代码可以测试浏览器是否支持 required 属性。 
       var isRequiredSupported = "required" in document.createElement("input"); 
       以上代码通过特性检测来确定新创建的<input>元素中是否存在 required 属性。 对于空着的必填字段,不同浏览器有不同的处理方式。Firefox 4和 Opera 11会阻止表单提交并在相 应字段下方弹出帮助框,而 Safari(5之前)和 Chrome(9之前)则什么也不做,而且也不阻止表单提 交。 
       2. 其他输入类型
        HTML5为<input>元素的 type 属性又增加了几个值。这些新的类型不仅能反映数据类型的信息, 而且还能提供一些默认的验证功能。其中,"email"和"url"是两个得到支持多的类型,各浏览器也 都为它们增加了定制的验证机制。例如: 
<input type="email" name ="email">
        <input type="url" name="homepage"> 
       顾名思义,"email"类型要求输入的文本必须符合电子邮件地址的模式,而"url"类型要求输入的 文本必须符合 URL 的模式。不过,本节前面提到的浏览器在恰当地匹配模式方面都存在问题。明显 的是"-@-"会被当成一个有效的电子邮件地址。浏览器开发商还在解决这些问题。 
       要检测浏览器是否支持这些新类型,可以在 JavaScript 创建一个<input>元素,然后将 type 属性 设置为"email"或"url",后再检测这个属性的值。不支持它们的旧版本浏览器会自动将未知的值设 置为"text",而支持的浏览器则会返回正确的值。例如: 
       var input = document.createElement("input"); input.type = "email"; 
       var isEmailSupported = (input.type == "email"); 
       要注意的是,如果不给<input>元素设置 required 属性,那么空文本框也会验证通过。另一方面, 设置特定的输入类型并不能阻止用户输入无效的值,只是应用某些默认的验证而已。 
       3. 数值范围
       除了"email"和"url",HTML5 还定义了另外几个输入元素。这几个元素都要求填写某种基于数
字的值:"number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week", 还有"time"。浏览器对这几个类型的支持情况并不好,因此如果真想选用的话,要特别小心。目前, 浏览器开发商主要关注更好的跨平台兼容性以及更多的逻辑功能。因此,本文介绍的内容某种程度上有 些超前,不一定马上就能在实际开发中使用。 
       对所有这些数值类型的输入元素,可以指定 min 属性(小的可能值)、max 属性(大的可能值) 和 step 属性(从 min 到 max 的两个刻度间的差值)。例如,想让用户只能输入 0到 100的值,而且这 个值必须是 5的倍数,可以这样写代码: 
       <input type="number" min="0" max="100" step="5" name="count">       
在不同的浏览器中,可能会也可能不会看到能够自动递增和递减的数值调节按钮(向上和向下按 钮)。 
       以上这些属性在 JavaScript中都能通过对应的元素访问(或修改)。此外,南昌网络公司百恒网络工程告诉大家还有两个方法:stepUp() 和 stepDown(),都接收一个可选的参数:要在当前值基础上加上或减去的数值。(默认是加或减 1。) 这两个方法还没有得到任何浏览器支持,但下面的例子演示了它们的用法。 
       input.stepUp(); //加 1
        input.stepUp(5); //加 5
        input.stepDown(); //减 1
        input.stepDown(10); //减 10 
4. 输入模式
        HTML5为文本字段新增了 pattern 属性。这个属性的值是一个正则表达式,用于匹配文本框中的 值。例如,如果只想允许在文本字段中输入数值,可以像下面的代码一样应用约束: 
       <input type="text" pattern="d+" name="count"> 
       注意,模式的开头和末尾不用加^和$符号(假定已经有了)。这两个符号表示输入的值必须从头到 尾都与模式匹配。 
       与其他输入类型相似,指定 pattern 也不能阻止用户输入无效的文本。这个模式应用给值,浏览 器来判断值是有效,还是无效。在 JavaScript中可以通过 pattern 属性访问模式。 
       var pattern = document.forms[0].elements["count"].pattern; 
       使用以下代码可以检测浏览器是否支持 pattern 属性。 
       var isPatternSupported = "pattern" in document.createElement("input"); 
5. 检测有效性
        使用 checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有个方法,如 果字段的值有效,这个方法返回 true,否则返回 false。字段的值是否有效的判断依据是本节前面介 绍过的那些约束。换句话说,必填字段中如果没有值就是无效的,而字段中的值与 pattern 属性不匹 配也是无效的。例如: 
if (document.forms[0].elements[0].checkValidity()){ //字段有效,继续 } else { //字段无效 } 
       要检测整个表单是否有效,可以在表单自身调用 checkValidity()方法。如果所有表单字段都有 效,这个方法返回 true;即使有一个字段无效,这个方法也会返回 false。 
if(document.forms[0].checkValidity()){
        //表单有效,继续 } else { 
       //表单无效 
       } 
       与 checkValidity()方法简单地告诉你字段是否有效相比,validity 属性则会告诉你为什么字 段有效或无效。这个对象中包含一系列属性,每个属性会返回一个布尔值。 
       ustomError :如果设置了 setCustomValidity(),则为 true,否则返回 false。 
       patternMismatch:如果值与指定的 pattern 属性不匹配,返回 true。 
       rangeOverflow:如果值比 max 值大,返回 true。 
       rangeUnderflow:如果值比 min 值小,返回 true。 
       stepMisMatch:如果 min 和max 之间的步长值不合理,返回 true。 
       tooLong:如果值的长度超过了 maxlength 属性指定的长度,返回 true。有的浏览器(如Firefox 4) 会自动约束字符数量,因此这个值可能永远都返回 false。 
        typeMismatch:如果值不是"mail"或"url"要求的格式,返回 true。 
       valid:如果这里的其他属性都是 false,返回 true。checkValidity()也要求相同的值。 
        valueMissing:如果标注为 required 的字段中没有值,返回 true。 因此,要南昌app开发公司百恒网络工程师提示想得到更具体的信息,就应该使用 validity 属性来检测表单的有效性。下面是一个例子。 

if (input.validity && !input.validity.valid){
        if (input.validity.valueMissing){ 
              alert("Please specify a value.")
        } else if (input.validity.typeMismatch){
               alert("Please enter an email address."); 
       } else { 
              alert("Value is invalid.");
        }
        } 

6. 禁用验证 
       通过设置 novalidate 属性,可以告诉表单不进行验证。 
       <form method="post" action="signup.php" novalidate> 
              <!--这里插入表单元素--> 
       </form> 
       在 JavaScript中使用 noValidate 属性可以取得或设置这个值,如果这个属性存在,值为 true, 如果不存在,值为 false。 
document.forms[0].noValidate = true; //禁用验证 
       如果一个表单中有多个提交按钮,为了指定点击某个提交按钮不必验证表单,可以在相应的按钮上 添加 formnovalidate 属性。 
<form method="post" action="foo.php"> 
       <!--这里插入表单元素-->
        <input type="submit" value="Regular Submit"> 
        <input type="submit" formnovalidate name="btnNoValidate"
               value="Non-validating Submit">
        </form>
       在这个例子中,点击第一个提交按钮会像往常一样验证表单,而点击第二个按钮则会不经过验证而 提交表单。使用 JavaScript也可以设置这个属性。 
//禁用验证 document.forms[0].elements["btnNoValidate"].formNoValidate = true; 
   本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌APP开发公司-百恒网络 http://www.jxbh.cn/ 如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×