14.2.4HTML5约束API验证
<body>
<form>
<!--
required属性在提交表单时不能空着
这个属性适用于<input> <textarea> <select>
-->
<input type='text' name='username' required>
<!--
email和url是两个得到支持的最多的类型
email只允许输入符合电子邮件的格式
url只允许输入的文本支持浏览器的格式
-->
<input type='email' name='email'>
<input type='url' name='homepage'>
<!--
number类型，只允许输入数字，但是也可以输入不符的类型，但是提交的时候会
提示错误，min是数的最小值，max最大值，step进位
-->
<input type='number' min='0' max='100' step='5' name='count' >
<!--
pattern 正则格式，允许表单输入的格式
-->
<input type='text' pattern="\d+" name='number' >
<!--
submit提交
-->
<input type='submit' value='提交' name='sub'>
</form>
<script>
//检测表单字段是否是必填的
var isUsernameRequired = document.forms[0].elements['username'].required;
console.log( isUsernameRequired );//true
//检测是否支持required
var isRequriedSupported = 'required' in document.createElement('input');
console.log( isRequriedSupported );//
var count = document.forms[0].elements['count'];
var sub = document.forms[0].elements['sub'];
for (var i in document.forms[0])
{
console.log(i+' : '+document.forms[0][i])
}
sub.onclick = function(){
//表单验证，只要有一个表单无效，就返回false
if (document.forms[0].checkValidity())
{
alert('表单有效');
}else{
alert('表单无效');
}
}
</script>
</body>
5、检测有效性
customError：如果设置了setCustomValidity(),则为true，否则返回false。
6、禁用验证
通过设置novalidate属性
<form method='post' action='signup.php' novalidate>
<!--这里插入表单元素-->
</form>
如果一个表单中有多个提交按钮，为了制定点击某个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate
<form>
<!--这里插入表单元素-->
<input type='submit' value='Regular Submit'>
<!--
formnovalidate指定某个提交按钮不必验证表单
-->
<input type='submit' formnovalidate name='btnNoValidate' value='Non-validating Submit'>
</form>
