type的属性值: 功能
date 生成一个日期选择器
email 生成一个E-mail输入框
url 生成一个URL输入框
number 生成一个只能输入数字的文本框
2.HTML5新增的客户端校验属性:
HTML 5为表单控件新增了如下几个校验属性（取代JS的具体体现）
required属性：指定表单控件的内容不能为空。
pattern属性：指定表单控件的值必须符合指定的正则表达式。值为一个合法的正则表达式。正则表达式中的斜杠不写
pattern=“^\d{3}-\d{7}$”
min、max、step属性：只对数值类型、日期类型的<input>元素有效，它们控制表单控件的值在min-max之间，符合step步长。
每次增加的数值就是所谓的步长
placeholder属性：
为单行文本框、多行文本框等显示提示信息。
属性值就是提示信息。
属性值以默认的灰色字体显示在表单的控件当中 -->
<table>
<h3>HTML5客户端验证</h3>
<form>
<tr>
<td>图书名称：</td>
<td><input type="text" id="name" placeholder="图书名称必须输入！" required /></td>
</tr>
<tr>
<td>图书ISBN：</td>
<td><input type="text" id="isbn" placeholder="格式：123-1-123-12345" required
pattern="\d{3}-\d-\d{3}-\d{5}" /></td>
</tr>
<tr>
<td>图书价格：</td>
<td><input type="number" id="price" min="20" max="150" step="5" /></td>
</tr>
<tr>
<td>作者邮箱：</td>
<td><input type="email" id="mail" placeholder="请输入邮箱地址！" /></td>
</tr>
<tr>
<td>图书详情：</td>
<td><input type="url" id="url" placeholder="请输入URL路径！" /></td>
</tr>
<tr>
<td><button type="submit">提交</button></td>
</tr>
</form>
</table>
<body>
<table>
<p>用户注册信息</p>
<form action="" id="userrag" method="post" onsubmit="return check();">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" id="username" onblur="checkUser();" onfocus="clearUser();"></td>
<td id="usrerror">*以英文开头，4~16个英文、数字或下划线字符！</td>
</tr>
<tr>
<td>电子邮箱:</td>
<td><input type="text" id="mail" onblur="checkMail();" onfocus="clearMail();"></td>
<td id="mailerror">*</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="pwd" onblur="checkPwd();" onfocus="clearPwd();"></td>
<td id="pwderror">*英文字母、数字、下划线，且长度在6~24个字符！</td>
</tr>
<tr>
<td>重复密码：</td>
<td><input type="password" id="repwd" onblur="checkRepwd();" onfocus="clearRepwd();"></td>
<td id="repwderror">*</td>
</tr>
<tr>
<td>身份证号码：</td>
<td><input type="text" id="huname" onblur="checkHu();" onfocus="clearHu();"></td>
<td id="huerror"></td>
</tr>
<tr>
<td>联系电话：</td>
<td><input type="text" id="pohname" onblur="checkPoh();" onfocus="clearPoh();"></td>
<td id="poherror"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"> <input type="reset"
value="重置"></td>
<td></td>
</tr>
</table>
</form>
</table>
<script>
//1.鼠标离开时用户名的检验 和 获得光标恢复用户名的初识状态
var username = document.getElementById("username");//获取表单元素
var usrerror = document.getElementById("usrerror");//获取提示信息的元素
function checkUser() {
var renull = /^\s*$/;// 对于\s匹配一个空白字符
var reguise = /^[a-zA-Z]\w{3,15}$/;
//对于[a-zA-Z]匹配一个英文字符 ，保证了以英文开头
// 对于\w 等价模式:[A-Za-z0-9] 匹配的内容:一个单字字符(包括英文，数字)
//对于{3,15}，就是前面的单字符可以出现3 到15 个，加上前面的一个英文字符，符合题目要求的4~16个字符
if (renull.test(username.value)) {
usrerror.style.color = "red";
usrerror.innerHTML = "*用户名不能为空";
return false;
}
else if (reguise.test(username.value)) {
usrerror.style.color = "black";
usrerror.innerHTML = "*以英文开头，4~16个英文、数字或下划线字符！";
return true;
}
else {
usrerror.style.color = "red";
usrerror.innerHTML = "*只能以英文开头，4~16个英文、数字或下划线字符！";
return false;
}
}
function clearUser() {
usrerror.style.color = "black";
usrerror.innerHTML = "*";
}
//2.鼠标离开时密码的检验 和 获得光标恢复密码框的初识状态
var pwd = document.getElementById("pwd");
var pwderror = document.getElementById("pwderror");
function checkPwd() {
var renull = /^\s*$/;
var reguise = /^\w{6,24}$/;
if (renull.test(pwd.value)) {
pwderror.style.color = "red";
pwderror.innerHTML = "*密码不能为空";
return false;
}
else if (reguise.test(pwd.value)) {
pwderror.style.color = "black";
pwderror.innerHTML = "*英文字母、数字、下划线，且长度在6~24个字符！";
return true;
}
else {
pwderror.style.color = "red";
pwderror.innerHTML = "*必须为英文字母、数字、下划线，且长度在6~24个字符！";
return false;
}
}
function clearPwd() {
pwderrorr.style.color = "black";
pwderrorr.innerHTML = "*";
}
//3.鼠标离开时对”重复密码“的检验 和 获得光标恢复”重复密码“的初识状态
var repwd = document.getElementById("repwd");
var repwderro = document.getElementById("repwderror");
function checkRepwd() {
var renull = /^\s*$/;
if (renull.test(repwd.value)) {
repwderro.style.color = "red";
repwderro.innerHTML = "*重复密码不能为空！";
return false;
}
else if (pwd.value == repwd.value) {
repwderro.style.color = "black";
repwderro.innerHTML = "*";
return true;
}
else {
repwderro.style.color = "red";
repwderro.innerHTML = "*两次密码输入不一致！";
return false;
}
}
function clearRepwd() {
repwderror.style.color = "black";
repwderror.innerHTML = "*";
}
//4.鼠标离开时对”电子邮箱 “的检验 和 获得光标恢复”电子邮箱 “的初识状态
var mail = document.getElementById("mail");
var mailerror = document.getElementById("mailerror");
function checkMail() {
var renull = /^\s*$/;
var reguise = /^\d{10}@qq.com$/;
if (renull.test(mail.value)) {
mailerror.style.color = "red";
mailerror.innerHTML = "*电子邮箱不能为空";
return false;
}
else if (reguise.test(mail.value)) {
mailerror.style.color = "black";
mailerror.innerHTML = "*";
return true;
}
else {
mailerror.style.color = "red";
mailerror.innerHTML = "*电子邮箱格式不正确！";
return false;
}
}
function clearMail() {
mailerror.style.color = "black";
mailerror.innerHTML = "*";
}
//5.鼠标离开时对”身份证号码 “的检验 和 获得光标恢复”身份证号码 “的初识状态
var huname = document.getElementById("huname");
var huerror = document.getElementById("huerror");
function checkHu() {
var renull = /^\s*$/;
var reguise = /^\d{6}([12][09]\d{2})([01]\d)([0123]\d)\d{4}$/;
if (renull.test(huname.value)) {
huerror.style.color = "red";
huerror.innerHTML = "*身份证号码不能为空";
return false;
}
else if (reguise.test(huname.value)) {
huerror.style.color = "black";
huerror.innerHTML = "*";
return true;
}
else {
huerror.style.color = "red";
huerror.innerHTML = "*身份证号码格式不正确！";
return false;
}
}
function clearHu() {
huerror.style.color = "black";
huerror.innerHTML = "*";
}
//6.鼠标离开时对”联系电话 “的检验 和 获得光标恢复” 联系电话“的初识状态
var pohname = document.getElementById("pohname");
var poherror = document.getElementById("poherror");
function checkPoh() {
var renull = /^\s*$/;
var reguise = /^\d{6,11}$/;
if (renull.test(pohname.value)) {
poherror.style.color = "red";
poherror.innerHTML = "*电话号码不能为空";
return false;
}
else if (reguise.test(pohname.value)) {
poherror.style.color = "black";
poherror.innerHTML = "*";
return true;
}
else {
poherror.style.color = "red";
poherror.innerHTML = "*电话号码格式不正确！";
return false;
}
}
function clearPoh() {
poherror.style.color = "black";
poherror.innerHTML = "*";
}
//最终提交时，进行总的判断，用到了短路原理，有一个不正确，就会弹出警示框
function check() {
if (checkUser() && checkPwd() && checkRepwd() && checkHu() && checkMail() && checkPoh()) {
return true;
}
else {
alert("你输入的信息不符合规则！");
return false;
}
}
//分析：提交后，页面重新加载，初识值已经是修改后的值了，并不是reset不起作用了
// var btn = document.getElementById("btn");
// function clear() {
// return clearHu() && clearMail() && clearPoh() && clearPwd() && clearRepwd() && clearUser();
// }
// btn.addEventListener("click", clear);
</script>