HTML5表单验证反馈

validity对象：通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false；

--元素.addEventListener('invalid', fn, false);==>fn回调

--ev.preventDefault()==>阻止默认验证

--valueMissing:输入值为空时

--typeMismatch:控件值与预期类型不匹配: 当输入类型和要求的类型不一致的时候返回true(this.valid.typeMismatch)

--patternMismatch:输入值不满足pattern正则: 当用户输入的内容和预期的正则要求不匹配 返回true

--tooLong:超过maxlength最大限制: 当用户输入内容的长度 超出了maxlength的限制 返回true

--rangeUnderflow:验证的range最小值

--rangOverflow:验证的range最大值

--stepMismatch:验证range的当前值是否符合min、max以及step的规则

--customError  不符合自定义验证：不符合在定义验证的时候返回true

>>>>>>>>>>>setCustomValidity()：自定义验证

 

 

表单验证： Invalid事件：验证反馈

input.addEventListener('invalid', fn,falise);

formnovaliddate属性：关闭验证

<form>
	<input type="text" required id="text"/>
	<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
	alert(this.validity.valid);如果是false的话，必选项目填写
//valueMissing   当输入值为空的时候返回true
	ev.preventDefault();
}
</script>

<form>
	<input type="text" id="text" />
	<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
oText.oninput=function()
{
	if(this.value=="敏感词")
	{
		this.setCustomValidity("请不要输入敏感词");
	}
	else
	{
		this.setCustomValidity("");
	}
};
function fn()
{
	alert(this.validity.customError);
	ev.preventDefault();
}

//valueMissing   当输入值为空的时候返回true
//typeMismatch   当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true
//tooLong 当用户输入的长度 超出了maxlength的限制 返回true
//customError  不符合在定义验证的时候返回true
</script>