赵工的个人空间


（专业技术部分）（转网页计算）（转业余爱好部分）


  网站建设

首页 > 专业技术 > 网站建设 > HTML5表单API
HTML5表单API

表单也有一些JavaScript API，可用于定制表单处理和验证操作。HTML5有一些不同的验证方法。使用默认需要验证的输入类型（如email），或者使用required属性将常规text类型转换为要求验证的域，此外使用一些特殊类型（如pattern）就可以定制验证要求。在一些更复杂的验证机制中，则必须使用API所提供的新资源。

1.与表单验证有关的元素属性：

①required属性：
一旦为表单的某个元素设置了required属性，那么此项的值不能为空，否则无法提交表单。
<input type="email" name="myemail" id="myemail" required>
表单中使用email类型接受电子邮件地址，浏览器会检查电子邮件是否有效，但即使该域为空也会进行验证。如果设置了required属性，那么该域必须输入值且符合所设置类型才有效。
②pattern属性：
Pattern属性为input元素定义了一个验证模式，支持正则表达式定制验证规则。示例：
<input pattern="[0-9]{6}" name="pcode" id="pcode" placeholder="6位邮政编码">
Pattern属性支持创建自定义检查规则，验证6个数字组成的邮政编码。如果输入类型不符合格式，则不能提交。
③min、max和step属性：
min、max和step用于指定针对数字或日期的限制。Min表示允许的最小值，max表示允许的最大值，step表示合法数据的间隔步长。示例：
<input type="range" name="volume" id="volume" min="0" max="1" step="0.2" />
④novalidate属性：
Novalidate用于指定表单或表单内的元素在提交时不验证。如果form元素应用novalidate属性，则表单中的所有元素在提交时都不再验证。示例：
  <form action="demo_form.php" novalidate="novalidate">
    <input type="email" name="user_email" />
    <input type="submit" />
  </form>

2.表单验证的属性：

①validity属性：
该属性获取表单元素的ValidityState对象，该对象包含8个方面的验证结果。ValidityState对象会一直存在，每次获取validity属性时，返回的是同一个ValidityState对象。示例：
var validityState=document.getElementById("username").validity;
②willValidate属性：
该属性获取一个布尔值，表示表单是否需要验证。如果表单设置了required或pattern，则willValidate属性的值为true，即表单验证将会执行。示例：
var willValidate=document.getElementById("username").willValidate;
③validationMessage属性：
该属性获取当前表单元素的错误提示信息。一般设置required的表单元素，其validation Message属性值一般为“请填写此字段”。示例：
var validationMessage=document.getElementById("username").validationMessage;
上述属性都是只读属性。

3.ValidityState对象：

ValidityState是通过validity属性获取的，该对象共有8个属性，分别针对8个方面的错误验证，属性值均为布尔值。
①valueMissing属性：必填的表单元素的值为空。
如果表单元素设置了required，则为必填项。如果必填项的值为空，就无法通过表单验证，valueMissing属性会返回true，否则返回false。
②typeMismatch属性：输入值与type类型不匹配。
HTML5新增的表单类型，如email、number、url等，都包含一个原始的类型验证。如果输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false。
③patternMismatch属性：输入值与pattern的正则表达式不匹配。
表单元素可通过pattern设置正则表达式的验证模式。如果输入内容不符合验证模式的规则，泽patternMismatch属性将返回true，否则返回false。
④tooLong属性：输入内容超过了表单元素的maxLength限定的字符长度。
表单元素可使用maxLength设置输入内容的最大长度。虽然输入时会限制表单内容的长度，但通过程序设置等情况下，还是可能超出最大长度限制。如果输入的内容超过了最大长度限制，则tooLong属性返回true，否则返回false。
⑤rangeUnderflow属性：输入的值小于min设定的值。
一般用于填写数值的表单元素，都可能会使用min设置数值范围的最小值。如果输入的数值小于最小值，则rangeUnderflow属性返回true，否则返回false。
⑥rangeOverflow属性：输入的值大于max设定的值。
一般用于填写数值的表单元素，都可能会使用max设置数值范围的最大值。如果输入的数值大于最大值，则rangeOverflow属性返回true，否则返回false。
⑦stepMismatch属性：输入的值不符合step所推算出的规则。
用于填写数值的表单元素，可能需要同时设置min、max和step，这就限制了输入的值必须是最小值与step值的倍数之和。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false。
⑧customError属性：使用自定义的验证错误提示信息。
有时候当输入值不符合语义规则时，要提示自定义错误信息。通常使用setCustomValidity (message)方法自定义错误信息，这时错误信息自定义为message，此时customError属性值为true；而setCustomValidity (“”)则清除自定义错误信息，此时customError属性值为false。

4.表单验证的方法：

①checkValidity()方法：显式验证方法。
每个表单元素都可以调用checkValidity()方法，返回一个布尔值，表示是否通过验证。默认情况下，表单验证发生在表单提交时，如果使用checkValidity()方法，可以在需要的任何地方验证表单。一旦表单没有通过验证，则会触发invalid事件。示例：
function checkForm(frm) {
   if (frm.myEmail.checkValidity()) {
      alert("邮件格式正确！");
   } else {
      alert("邮件格式错误！");
   }
}
②setCustomValidity()方法：自定义错误提示信息的方法。
当默认的提示错误满足不了需求时，可以通过该方法自定义错误提示。当通过此方法自定义错误提示信息时，元素的validationMessage属性值会更改为定义的错误提示信息，同时ValidityState对象的customError属性值变为true。示例：
function checkForm(frm) {
   var name=frm.name;
   if (name.value=="") {
      name.setCustomValidity("请填写姓名！");
   } else {
      name.setCustomValidity("");
   }
}

5.表单验证事件：

HTML5提供了一个表单验证事件invalid。无论是提交表单还是直接调用checkValidity方法，只要有表单元素没有通过验证，就会触发invalid事件。Invalid事件本身不处理任何事情，可以监听该事件，自定义事件处理。示例：
function invalidHandler(evt) {
   var validity=evt.srcElement.validity;
   if (validity.valueMissing) {
      alert("姓名不能为空！");
   }
}
window.onload=function(){
   var name=document.getElementById("name");
   name.addEventListener("invalid",invalidHandler,false);
}
页面初始化时，为姓名输入框添加一个监听invalid事件。当表单验证没有通过时，会触发invalid事件，调用注册到事件中的函数invalidHandler()。
一般情况下，在invalid事件处理完成后，还是会触发浏览器默认的错误提示，必要时，可以屏蔽浏览器后续的错误提示，可以使用事件的preventDefault()方法，阻止浏览器的默认行为，并自行处理错误提示信息。

6.setCustomValidity()：

如果用户提交一个包含无效域的表单，支持HTML5的浏览器就会一条错误信息。使用setCustomValidity(message)方法可以定制验证信息。
通过这种方法，就可以在表单提交时显示自定义错误信息。如果提供的是空消息，错误消息就会被清除。示例：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Forms </title>
  <script>
function initiate() {
  name1=document.getElementById("firstname");
  name2=document.getElementById("lastname");
  name1.addEventListener("input", validation, false);
  name2.addEventListener("input", validation, false);
  validation();
}
function validation() {
  if (name1.value=='' && name2.value=='') {
    name1.setCustomValidity('insert at least one name');
    name1.style.background='#FFDDDD';
  } else {
    name1.setCustomValidity('');
    name1.style.background='#FFFFFF';
  }
}
window.addEventListener("load", initiate, false);
  </script>
</head>
<body>
<section id="form">
  <form name="registration" method="get">
    First Name:
<input type="text" name="firstname" id="firstname">
    Last Name:
<input type="text" name="lastname" id="lastname">
<input type="submit" id="send" value="sign up">
  </form>
</section>
</body>
<html>
因为用户选择输入的数据类型并不确定，要使用JavaScript代码和自定制错误，就能够创建适合这种需要的有效验证机制。
代码会在load事件触发时执行，initiate()函数是事件处理函数。这个函数创建两个<input>元素引用，在两个元素上添加input事件监听器。这些监听器会在用户输入数据时执行validation()函数。
因为文档加载时，<input>元素为空，所以必须设置无效条件，防止用户在未输入姓名之前提交表单。因此，必须在一开始就调用validation()函数，以检查这个条件。如果姓和名都是空字符串，那么错误就会显示，并且firstname的背景颜色会变成浅红色。然而，如果后来输入了姓和名，这个条件变成非true，那么错误信息会消失，firstname的背景就会从黑色变成白色。这个过程中唯一变化的是背景颜色，只有用户提交表单时使用setCustomValidity()声明的错误消息才会显示。
checkValidity()：这个方法强制要求在脚本中进行验证，能够在不提交表单的前提下激活浏览器支持的验证过程。如果元素是有效的，这个方法会返回true。

7.无效事件：

每当用户提交表单时，如果检测到无效域，就会触发一个事件。这个事件就是invalid，主要关注发生错误的元素。注册一个事件处理程序，定制响应方式。示例：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Forms </title>
  <script>
function initiate() {
  age=document.getElementById("myage");
  age.addEventListener("change", changerange, false);
  document.information.addEventListener("invalid", validation, true);
  document.getEventById("send").addEventListener("click", sendit, false);
}
function changerange() {
  var output=document.getElementById("range");
  var calc=age.value-20;
  if (calc<20) {
    calc=0;
    age.value=20;
  }
  output.innerHTML=calc+' to '+age.value;
}
function validation(e) {
  var elem=e.target;
  elem.style.background='#FFDDDD';
}
function sendit() {
  var valid=document.information.checkValidity();
  if (valid) {
    document.information.submit();
  }
}
window.addEventListener("load", initiate, false);
  </script>
</head>
<body>
<section id="form">
  <form name="information" method="get">
    Nickname:
    <input pattern="[A-Za-z]{3,}" name="nickname" id="nickname" maxlength="10" required>
    Email:
    <input type="email" name="myemail" id="myemail" required>
    Age Range:
    <input type="range" name="myage" id="myage" min="0" max="80" step="20" value="20">
    <output id="range">0 to 20</output>
    <input type="button" id="send" value="sign up">
  </form>
</section>
</body>
<html>
上述代码创建了一个新表单，其中包括一个输入域，分别用于填写昵称、电子邮件和年龄范围（20岁以内）。Nickname输入拥有三个验证属性，pattern属性规定只接受由3个以上A~Z（大小写）字母组成的字符串，maxlength属性规定最大输入字符个数为10个，required属性则要求此域不能为空。Email输入元素会根据本身类型和required属性对内容进行限制。Range输入元素使用min、max、step和value属性，设置范围的条件。还声明了一个<output>元素用于在屏幕上显示所选范围。
JavaScript对于表单的操作很简单，当用户单击“提交”按钮时，每一个无效域都会触发invalid事件，validation()函数会将这些域的背景颜色修改为浅红色。
当文档完全加载后，一般的load事件就会触发，然后这段代码就会开始执行。执行initiate()函数，添加三个事件监听器，change、invalid和click。
每当表单元素发生变化时，该元素就会触发change事件，在事件触发时调用changerange()函数，当用户移动控件滑块修改年龄值时，changerange()函数就会计算新的值。这个元素接受的输入是20年间隔的数字，例如0~20或20~40，然而输入只返回一个值，如20、40、60或80。为了计算开始值，必须使用公式age.value-20，将当前范围值减去20，最后将结果保存到calc变量中。
initiate()函数添加的第二个监听器旨在处理invalid事件。当事件触发时，会调用validation()函数，修改无效域的背景颜色。当单击“提交”按钮时，无效输入元素就会触发这个事件。这个事件不会引用表单或“提交”按钮，但是会引用发生的输入元素。validation()函数使用变量e和属性target捕捉引用，并将它保存到变量elem中。因此，e.target会返回无效输入的引用。validation()函数的后续代码修改了元素的背景颜色。
在initiate()函数中，还有另一个监听器。为了完全控制表单的提交和验证时间，创建一个普通按钮，而非提交submit按钮。当单击该按钮时，只有所有元素都验证为有效时，表单才会提交。initiate()函数在元素上添加的click事件监听器会在按钮单击时执行sendit()函数。

8.实时验证：

为了增加定制验证过程的实用性，可以使用ValidityState对象的几个属性：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Forms </title>
  <script>
function initiate() {
  age=document.getElementById("myage");
  age.addEventListener("change", changerange, false);
  document.information.addEventListener("invalid", validation, true);
  document.getEventById("send").addEventListener("click", sendit, false);
  document.information.addEventListener("input", checkval, false);
}
function changerange() {
  var output=document.getElementById("range");
  var calc=age.value-20;
  if (calc<20) {
    calc=0;
    age.value=20;
  }
  output.innerHTML=calc+' to '+age.value;
}
function validation(e) {
  var elem=e.target;
  elem.style.background='#FFDDDD';
}
function sendit() {
  var valid=document.information.checkValidity();
  if (valid) {
    document.information.submit();
  }
}
function checkval(e) {
  var elem=e.target;
  if (elem.validity.valid) {
    elem.style.background='#FFFFFF';
  } else {
    elem.style.background='#FFDDDD';
  }
}
window.addEventListener("load", initiate, false);
  </script>
</head>
<body>
<section id="form">
  <form name="information" method="get">
    Nickname:
    <input pattern="[A-Za-z]{3,}" name="nickname" id="nickname" maxlength="10" required>
    Email:
    <input type="email" name="myemail" id="myemail" required>
    Age Range:
    <input type="range" name="myage" id="myage" min="0" max="80" step="20" value="20">
    <output id="range">0 to 20</output>
    <input type="button" id="send" value="sign up">
  </form>
</section>
</body>
<html>
向表单新增加了一个input事件监听器，每当用户修改一个域时，即填写或修改表单内容，代码就会执行checkval()函数处理这个事件。
checkval()函数还会使用target属性创建触发事件的元素引用，它会通过在elem.validity.valid结构中检查validity属性的valid状态，以此控制它的有效性。
如果元素有效，那么valid状态就是true；否则就是false。使用这些信息，就可以改变触发input事件的元素背景颜色。有效状态的颜色是白色，无效状态颜色的浅红色。
通过这种简单的修改，现在每当用户修改表单中任意元素的值，元素就会进行验证，其状态会实时显示在屏幕上。
·forminput事件：当用户在表单中输入信息时，就会触发这个事件
·formchange事件：当表单发生变化时，就会触发这个事件

9.有效性约束：

ValidityState对象的valid属性会返回元素的有效性状态值，如果所有条件都有效，那么valid属性就会返回true。在不同的条件下，一共可能出现以下8种有效状态：
·valueMissing：如果设置了required属性，而且输入域为空，那么这个状态就是true
·typeMismatch：如果输入语法不符合指定的类型，那么这个状态就是true
·patternMismatch：如果输入内容与所设置模式不匹配，那么这个状态就是true
·tooLong：如果声明了maxlength属性，并且输入内容在属性指定的长度范围内，那么这个状态就是true
·rangeUnderflow：如果声明了min属性，并且输入内容小于属性指定值，那么这个状态就是true
·rangeOverflow：如果声明了max属性，并且输入内容高于属性指定值，那么这个状态就是true
·stepMismatch：如果声明了step属性，并且输入值与min、max和value等属性值不匹配，那么这个状态就是true
·customError：如果设置了自定义错误，那么这个状态就是true
·valid：这是个普通有效性状态，如果其他状态都是true，那么会返回true
要检查这些有效性状态，必须使用语法element.validity.status，其中status是前面所列值之一。通过使用这些值，就可以确切地知道表单发生错误的原因了。
Sendit()函数增加了这种控制，checkValidity()方法会验证表单，如果表单有效，那么就使用submit()提交表单；否则，在检查nickname输入域的有效性状态patternMismatch和valueMissing时，如果这两个状态之一返回true，则显示错误信息。
function sendit() {
  var elem=document.getElementById("nickname");
  var valid=document.information.checkValidity();
  if (valid) {
    document.information.submit();
  } else if (elem.validity.patternMismatch||elem.validity.valueMissing) {
    alert('nickname must have a minimum of 3 characters');
  }
}
·willValidate：
在动态应用程序中，很可能有一些元素不需要进行验证。例如，按钮、隐藏域或<output>元素。使用willValidate属性或语法element.willValidate，就可以检查这种情况。

Copyright@dwenzhao.cn All Rights Reserved   备案号：粤ICP备15026949号
联系邮箱：dwenzhao@163.com  QQ:1608288659