表单验证
显示验证----可自己设置验证通过 和 不通过的 提示信息
<script>
/*
显示验证----可自己设置验证通过 和 不通过的 提示信息
checkValidity方法用于检验输入信息与规则是否匹配，匹配则返回TRUE 不匹配则返回FALSE
*/
function checkName(){
var name=document.getElementById("user");
var result=document.getElementById("result");
if(name.value=='')
{
result.innerText="请输入姓名";
alert("输入姓名");
return;
}
var flag=name.checkValidity();
if(flag){
result.innerText="格式正确";
}else
result.innerText="格式不正确";
}
</script>
<form>
<fieldset>
<legend>
name
</legend>
<input type="text" id="user" pattern="^[a-zA-Z0-9]{5,}$" onblur="checkName()" > <!--onblur 事件会在对象失去焦点时发生 -->
<span id="result"></span>
<br>
<input type="password">
<br>
<input type="submit" value="submit">
</fieldset>
</form>
自动验证
<!-- 表单自动验证属性：required pattern 数字验证 min max step -->
<form>
<fieldset>
<legend>
num
</legend>
<label>数字:</label><input type="number" min="0" max="100">
<label>步长：3</label>
<input type="number" step="3">
<input type="submit" value="submit">
</fieldset>
</form>
取消验证
novalidate属性 可取消表单全部元素的验证
<!-- novalidate属性 可取消表单全部元素的验证 -->
<form novalidate="true">
<input type="email">
</form>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h50879.shtml
