版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/86307986
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 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");效果：
