JQuery HTML5 验证表单

HTML5新增属性验证表单内容

效果：

说明：提示原来的HMTL5自带的消息哦！

使用validity属性进行表单验证提示：可以自定义消息哦！

页面：

		

			
tel:
				
			
age:
				
			
name:
             
      
            
birthday:
	      	
			
		
	

js

$(function() {

	$("#submit").click(function() {

		//tel 注意：(1)不能jquery;(2)必须在input有required;
		//			var tel = $("#tel");
		//js DOM
		var tel = document.getElementById("tel");

		if(tel.validity.valueMissing == true) { //valueMissing 值的错误提示
			tel.setCustomValidity("手机号码不能为空!");
		} else if(tel.validity.patternMismatch == true) { //patternMismatch 正则表达式错误
			tel.setCustomValidity("手机号码必须是13,18,19开头的11位!");
		} else { //清空
			tel.setCustomValidity("");
		}

		//js DOM
		var age = document.getElementById("age");

		if(age.validity.valueMissing == true) { //valueMissing 值的错误提示
			age.setCustomValidity("年龄不能为空!");
		} else if(age.validity.patternMismatch == true) { //patternMismatch 正则表达式错误
			age.setCustomValidity("年龄必须是0-120!");
		} else { //清空
			age.setCustomValidity("");
		}

		//js DOM name
		var name = document.getElementById("name");

		if(name.validity.valueMissing == true) { //valueMissing 值的错误提示
			name.setCustomValidity("姓名不能为空!");
		} else if(name.validity.patternMismatch == true) { //patternMismatch 正则表达式错误
			name.setCustomValidity("姓名必须由英文字母和数字组成，用户名长度为4～16字符");
		} else { //清空
			name.setCustomValidity("");
		}
		
		
		

	});

});

效果：

总结：可以将上述的写的代码封装成函数，会更加简便！

//domName:DOM对象
//domEmpty:未填写提示信息
//domString:正则表达式错误
function my(domName, domEmpty, domString) {
	if(domName.validity.valueMissing == true) { //valueMissing 值的错误提示
		domName.setCustomValidity(domEmpty);
	} else if(domName.validity.patternMismatch == true) { //patternMismatch 正则表达式错误
		domName.setCustomValidity(domString);
	} else { //清空
		domName.setCustomValidity("");
	}

}

调用方法：

	//调用方法birthday
		my(document.getElementById("bir"), "年份不能为空", "生日的年份为1900～2016");

 

效果：

     

注意：获得DOM对象，不能用JQuery对象哦！要有提示必须在input里写required