h5学习笔记之表单事件

表单验证反馈:
Invalid事件 validity对象(valid查看验证是否通过)
input.addEventListener(‘invalid’,fn,false)
阻止默认验证：ev.preventDefault()
formnovalidate属性 : 关闭验证
oText.addEventListener(“invalid”,fn1,false);
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
customError 不符合自定义验证
setCustomValidity(); 自定义验证
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则

1、Invalid事件 validity对象(valid查看验证是否通过) ,
input.addEventListener(‘invalid’,fn,false) ,
阻止默认验证：ev.preventDefault()
valueMissing : 输入值为空时

如： 下面代码的意思就是表单设置了验证，如果验证失败就会返回false

     <form action="http://www.baidu.com" method="post">
		<input type="text" required id="txt">                            //这里设置了不能为空
		<input type="submit">
	</form>
	<script>
		var txt = document.getElementById("txt");
		txt.addEventListener('invalid',fn,false);                      //这里设置了一个绑定事件，如果内容为空，上面的验证就会失败，就会执行fn这个函数
		function fn(){
			ev.preventDefault();                                                  //阻止默认事件
			alert(this.validity.valid);                                             //validity  是一个对象，valid 是这个对象的值，如果上面失败了，则这个值为false
			//	alert(this.validity.valueMissing);                              //如果值为空，返回true
		}

2、typeMismatch : 控件值与预期类型不匹配，其实和上面一样
如果填入的值input表单中的类型不一样，那么 this.validity.typeMismatch 返回的值就是true
3、patternMismatch : 输入值不满足pattern正则
在input上设置 pattern 值 不满足正则则 this.validity.patternMismatch 返回true
4、自定义验证 customError 不符合自定义验证 失败了返回true
setCustomValidity(); 自定义验证 这个属性在火狐才有效果
如代码

       <form action="http://www.baidu.com" method="post">
		<input type="text" placeholder="请输入用户名:" id="txt" value="">
		<input type="submit">
		<input type="button" id="btn">
	</form>
	<script>
		var txt = document.getElementById("txt");
		var btn = document.getElementById("btn");
		txt.addEventListener('invalid',fn,false);
		btn.onclick = function(){
			if (txt.value == "aa")
			{
				//alert(1);
				//判断成功显示什么提示信息，同时阻止提交
				txt.setCustomValidity("请不要输入禁止词汇");               //效果 是在框上提示文本     
			}else{
				//判断不成功则清楚提示信息
				txt.setCustomValidity("");
			}
		}
		function fn(ev){
			var ev = ev||window.event;
			alert(this.validity.customError);//返回true  
			ev.preventDefault();

		}