HTML5新增属性验证表单内容
<body><!-- HTML5验证的特性 ：required="required"必填number,url,email,search....--><form action="#" method="post"><input type="search" id="uname" value="" required="required" placeholder="用户名只能是6-10位字符" pattern="[a-zA-Z]{6,10}" /><br /><input type="email" id="email" value="" required="required" /><input type="submit" id="but" value="注册" /></form></body>效果：
说明：提示原来的HMTL5自带的消息哦！
使用validity属性进行表单验证提示：可以自定义消息哦！
页面：
<body><form action="#" method="post"><p>tel:<input type="text" name="tel" required="required" id="tel" maxlength="11" size="25" placeholder="请输入手机号13，18，19开头的号" pattern="1[389]\d{9}" /><p>age:<input type="text" name="age" id="age" value="" required pattern="120|(1[0-1]|[1-9])?\d" /></p><p>name:<input type="text" name="name" id="name" value="" maxlength="17" required="required" pattern="[a-zA-Z][a-zA-Z0-9]{3,15}"/></p><p>birthday:<input type="text" name="bir" id="bir" placeholder="输入出生年份" required="required" pattern="19\d{2}|20[0-1][0-6]"/></p><input type="submit" id="submit" name="" value="注册" /></form></body>js
$(function() {$("#submit").click(function() {//tel 注意：(1)不能jquery;(2)必须在input有required;// var tel = $("#tel");//js DOMvar 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 DOMvar 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 namevar 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("");}}调用方法：
//调用方法birthdaymy(document.getElementById("bir"), "年份不能为空", "生日的年份为1900～2016");
效果：
![UserWarning: findfont: Font family [‘sans-serif‘] not found. Falling back to DejaVu Sans](https://img-blog.csdnimg.cn/af225708a8ad4a39ab93895ae61fffb6.png)
