一、本课目标
- 掌握使用HTML5的方式验证表单
包括两个部分：
- HTML5新增属性
- validity属性
二、HTML5新增属性
image.png
三、validity属性
注：该属性的方法都是在DOM对象的基础上来使用的，所以在jQuery验证中获取值都是通过DOM对象来获取的。
image.png
image.png
image.png
示例代码：
html文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿QQ注册</title>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2 class="reg-top"></h2>
<div class="reg-box">
<div class="reg-main">
<h3>注册账号</h3>
<form action="" method="post" class="reg-form">
<div class="reg-input">
<label><i>*</i>昵称：</label>
<input type="text" id="uName" required placeholder="英文、数字长度为6-10个字符" pattern="[a-zA-Z0-9]{6,10}" />
</div>
<div class="reg-input">
<label><i>*</i>密码：</label>
<input type="password" id="pwd" required placeholder="长度为6-16个字符" pattern="[a-zA-Z0-9]{6,16}"/>
</div>
<div class="reg-input">
<label>手机号码：</label>
<input type="text" pattern="^1[34578][0-9]{9}$"/>
<span id="tel-tip">忘记密码时找回密码使用</span>
</div>
<div class="reg-input">
<label><i>*</i>邮箱：</label>
<input type="email" required id="email"/>
</div>
<div class="reg-input">
<label>年龄：</label>
<input type="number" min="12"/>
</div>
<div class="submit-box">
<input type="submit" id="submit" value="立即注册" >
</div>
</form>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/reg.js"></script>
</body>
</html>
css文件：
*{padding:0;margin:0;}
body,html{font-family:"Microsoft YaHei",SimHei,"微软雅黑","黑体";}
body{
background:url(../img/body.png) repeat-x;
}
h2,h3{
font-weight:normal;
}
.container{
width:956px;
margin:0 auto;
}
.reg-top{
background:url(../img/bg_chs.png) repeat-x center top;
height:109px;
}
.reg-box{
height:500px;
background:#f9fdff;
border:1px #81add9 solid;
border-top:0 none;
}
.reg-main{
width:600px;
margin-left: 25px;
padding:1px;
}
.reg-main h3{
height:25px;
line-height:25px;
border-left:3px #59AfE4 solid;
padding-left:10px;
font-size:18px;
margin-top:80px;
color:#666;
}
.reg-form{
border-top:1px #d7d7d7 solid;
margin-top:10px;
}
.reg-input{
height:36px;
line-height:36px;
margin-top:18px;
}
.reg-input label{
float:left;
width:80px;
padding-right:8px;
text-align:right;
font-size:14px;
}
.reg-input label i{
color:red;
margin-right:3px;
font-style:normal;
}
.reg-input input{
float:left;
width:280px;
height:18px;
line-height:18px;
font-size:14px;
padding:8px;
border:1px #a8d2e7 solid;
}
.reg-input span{
float:left;
padding-left:10px;
font-size:12px;
color:#666;
}
#submit{
width:180px;
height:50px;
font-size:24px;
line-height:50px;
text-align:center;
color:#fff;
margin-top:50px;
margin-left:110px;
border:0 none;
background:#b6010e;
font-family: "Microsoft YaHei",SimHei,"微软雅黑","黑体";
cursor:pointer;
}
js文件：
$(document).ready(function(){
$("#submit").click(function(){
// 获得昵称的输入值
var u = document.getElementById("uName");
// 表单设置了required属性，为必填项
if (u.validity.valueMissing == true) {
// 自定义提示信息
u.setCustomValidity("昵称不能为空！");
// 输入值不符合正则表达式
} else if (u.validity.patternMismatch == true) {
// 自定义提示信息
u.setCustomValidity("昵称必须是6到10位的英文或数字！");
// 以上情况都符合要求
} else {
// 提示信息设为空
u.setCustomValidity("");
}
// 获得密码的输入值
var pwd = document.getElementById("pwd");
// 表单设置了required属性，为必填项
if (pwd.validity.valueMissing == true) {
// 自定义提示信息
pwd.setCustomValidity("密码不能为空！");
// 输入值不符合正则表达式
} else if (pwd.validity.patternMismatch == true) {
// 自定义提示信息
pwd.setCustomValidity("密码必须是6到16位的英文或数字！");
// 以上情况都符合要求
} else {
// 提示信息设为空
pwd.setCustomValidity("");
}
// 获得邮箱的输入值
var email = document.getElementById("email");
// 表单设置了required属性，为必填项
if (email.validity.valueMissing == true) {
// 自定义提示信息
email.setCustomValidity("邮箱不能为空！");
// 输入值不符合typeMismatch
} else if (email.validity.typeMismatch == true) {
// 自定义提示信息
email.setCustomValidity("邮箱格式不正确！");
// 以上情况都符合要求
} else {
// 提示信息设为空
pwd.setCustomValidity("");
}
})
})
四、总结
image.png
