下载掌阅APP，畅读海量书库
立即打开
在HTML5中，form元素的新增属性中比较重要的只有一个，那就是：novalidate。从“2.2表单元素”这一节我们可以知道，email、tel、url等类型的input元素中内置的验证机制默认会自动执行。但是在某些情况下，我们需要使用JavaScript来创建更为复杂且健全的验证，这时就要覆盖原有的验证机制了。现在问题来了，怎么覆盖呢？
在HTML5中，我们可以使用novalidate属性来禁用form元素的所有文本框内置的验证功能。
语法
<form novalidate="novalidate">
……
</form>
说明
novalidate只有一个属性值：novalidate。当然，你也可以直接简写为：<form novalidate></form>。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post" novalidate>
<p><label>电子邮箱：<input type="email" /></label></p>
<p><label>手机号码：<input type="tel" /></label></p>
<input type="submit" value="提交" />
</form>
</body>
</html>
浏览器预览效果如图3-14所示。
图3-14 novalidate属性
分析
在上面这个例子中，我们为form元素添加了novalidate属性，因此当点击按钮提交表单时，form元素内的文本框就不会采用浏览器内置的验证机制，然后我们就可以使用JavaScript来创建新的验证规则，请看下面的例子。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p{margin:0;padding:0;margin-top:8px;margin-bottom: 8px;}
</style>
<script>
window.onload=function(){
var oBtn = document.getElementById("btn");
var oEmail = document.getElementsByTagName("input")[0];
var oTel = document.getElementsByTagName("input")[1];
var errorEmail = document.getElementById("errorEmail");
var errorTel = document.getElementById("errorTel");
var oForm = document.getElementsByTagName("form")[0];
//正则表达式
var regEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
var regTel = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
//点击按钮后进行验证
oBtn.onclick = function(){
if(!regEmail.test(oEmail.value)){
errorEmail.innerHTML = "请输入正确的邮箱地址";
}else{
errorEmail.innerHTML="";
}
if(!regTel.test(oTel.value)){
errorTel.innerHTML = "请输入正确的手机号码";
}else{
errorTel.innerHTML="";
}
//如果验证都通过，则提交表单
if(regEmail.test(oEmail.value)&& regTel.test(oTel.value)){
oForm.onsubmit();
}
};
}
</script>
</head>
<body>
<form method="post" novalidate>
<p><label>电子邮箱：<input type="email" /></label><span id="errorEmail"></span></p>
<p><label>手机号码：<input type="tel" /></label><span id="errorTel"></span></p>
<input id="btn" type="button" value="提交" />
</form>
</body>
</html>
浏览器预览效果如图3-15所示。
图3-15 自定义验证功能
分析
在这个例子中，我们使用novalidate属性来禁用所有文本框内置的验证功能，这样我们就可以使用JavaScript来定义自己的一套验证方法，而不会跟内置的验证功能冲突。