html5表单验证
h5新增的表单验证都存在了ValidityState对象中,该对象是通过validity 属性获取的，
该对象有11个属性;
1．valueMissing属性
必填的表单元素的值为空。对应required
2．typeMismatch属性
输入值与type类型不匹配,如email、number、url等
3．patternMismatch属性
输入值与pattern特性的正则不匹配。
4．tooLong,tooShort属性
对应字符长度maxlength,minlength
5．rangeUnderflow属性
输入的值小于min特性的值。
6. rangeOverflow属性
输入的值大于max特性的值。
7．stepMismatch属性
输入的值不符合step特性所推算出的规则。
8．customError属性
使用自定义的验证错误提示信息。
有时候，不太适合使用浏览器内置的验证错误提示信息，需要自己定义。当输入值不符合语义规则时，会提示自定义的错误提示信息。
通常使用setCustomValidity()方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，
此时customError属性值为true；setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。
9.valid
当前输入是否有效
10.badInput
输入无效，如number框输入abc
另外:
checkValidity方法用来检测表单或元素的输入是否有效。
input的一些属性方法:
pattern：规定用于验证输入字段的正则表达式。
oninvalid：提交的input元素的值为无效值时（这里是正则验证失败），触发oninvalid事件。oninvalid属于Form 事件。
setCustomValidity()：这个是HTML5内置的JS方法，用来自定义提示信息
maxlength：限定input最大输入长度
oninput：该事件在 input 或 textarea 元素的值发生改变时触发。
novalidate=“novalidate” 禁用验证.作用于表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form >
<p><label for="runnername">Runner:</label>
<input id="runnername" name="runnername" type="text" />
</p>
<!--html5自带的验证 -->
<p>姓名：<label><input type="text" name="" required="required" pattern="[\u4e00-\u9fa5]{2,4}" placeholder="请输入姓名" oninvalid="setCustomValidity('真实姓名必须是中文，且长度不小于2，不大于4')" oninput="setCustomValidity('')"></label></p>
<p>密码：<label><input type="password" name="" required="required" pattern="^[a-zA-Z0-9]\w{5,19}$" placeholder="请输入密码" oninvalid="setCustomValidity('6~20字母数字或下划线')" oninput="setCustomValidity('')"></label></p>
<p>身份证号：<label><input type="text" name="" required="required" pattern="^([0-9]){18}(x|X)?$" placeholder="请输入身份证号" oninvalid="setCustomValidity('请输入正确的身份证号码')" maxlength="18" oninput="setCustomValidity('')"></label></p>
<p>手机号码：<label><input type="tel" name="" required="required" maxlength="11" pattern="^(0|86|17951)?1[0-9]{10}" placeholder="请输入手机号" oninvalid="setCustomValidity('请输入11位手机号码')" oninput="setCustomValidity('')"></label></p>
<!--multiple,支持输入多个邮箱,用逗号分隔;-->
<p>邮箱：<label><input type="email" name="" required="required" multiple="multiple" placeholder="请输入邮箱" ></label></p>
<p>时间：<label><input type="date" name="" required="required" pattern="" placeholder="请输入时间" ></label></p>
<p>网址：<label><input type="url" name="" required="required" pattern="/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/" placeholder="请输入网址" ></label></p>
自动获取焦点: <input type="text" name="user_name" autofocus="autofocus" /><br />
<input type="submit" name="提交">
</form>
<br /><br /><br /><br />
<form >
minlength:<input type="text" minlength="2" maxlength="4" /><br />
姓名1：<input type="text" name="name" required="required" placeholder="请输入姓名" pattern="[\u4e00-\u9fa5]{2,5}" />
<br />
<!--如果想自定义错误的提示语,使用oninvalid="setCustomValidity('姓名需为中文');"
但是这种,如果自定了提示语,那么非空验证也会是这个提示语,且及时验证通过,设置的提示语不会主动情况,所以需要手动清除错误信息
才能保证校验通过;
-->
姓名2：<input type="text" name="name" required="required" placeholder="请输入姓名" pattern="[\u4e00-\u9fa5]{2,5}" oninvalid="setCustomValidity('请输入中文2-5位');" oninput="setCustomValidity('')" />
<!--改进-->
<br /> 姓名3：<input type="text" name="name" required="required" placeholder="请输入姓名" pattern="[\u4e00-\u9fa5]{2,5}" oninvalid="checkName(this);" />
<!--自定义方法验证-->
<br />年龄：<input type="number" id="age" name="age" value="10" onblur="checkAge()" />
<br /><input type="submit" />
</form>
<script>
function checkAge () {
var age= document.getElementById("age");
if(age.value==''){
alert('请输入数字!');
return false;
}else if(!age.checkValidity()){
alert('请输入合法数字');
return false;
}
}
function checkName(inputelement) {
console.log(inputelement.validity);
//这个可以看做通用判断属性,无论什么属性,只有不符合条件,就false
// alert(inputelement.validity.valid);
//非空判断
// if(inputelement.value==''){
// inputelement.setCustomValidity('请输入中文!');
// return;
// }else{
// inputelement.setCustomValidity("");
// return;
// }
//或者使用非空属性判断,这个时候需要input设置了required属性才行
// if(inputelement.validity.valueMissing){
// inputelement.setCustomValidity('请输入中文!');
// }
//使用具体的属性,非空判断可以用自带的判断,不需要自已写
if(inputelement.validity.patternMismatch) {
inputelement.setCustomValidity('请输入中文2-5位');
} else {
inputelement.setCustomValidity("");
return true;
}
}
</script>
</body>
</html>
上一篇： HTML5表单