#表单校验（JS、H5）
为什么需要进行表单验证？
列出String 对象和表单验证有关的成员
$(":input")能匹配页面中的哪些元素？
如何表示一个正则表达式的开头和结尾？
课件
1表单选择器
2验证表单内容
3使用String 对象验证邮箱
4字符串验证
5验证休闲网登录页面
6文本框内容的验证
7休闲网注册页面的验证
8校验提示特效
9表单验证事件和方法
10文本输入提示特效
!正则表达式
11定义正则表达式
12表达式的模式
13RegExp对象
14String对象
15!正则表达式符号
16正则表达式的应用
验证邮政编码和手机号码
使用HTML5的方式验证表单
HTML5新增属性
validity属性
总结
代码
示例1：表单选择器
*{padding:0; margin:0;}
body{
font-size:13px;
color:#000;
line-height:25px;
}
.main{
float:none;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear:both;
}
#header{
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
height: 36px;
}
#headerLeft{width:200px;
float:left;
}
#headerRight{width:160px;
float:right;
color:#FFF;
}
#center{
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
width:100%;
}
.main dl dt{width:25%;
text-align:right;
height:25px;
float: left;
}
.main dl dd img{vertical-align: middle;}
.bg{
background-image: url(../images/dl_l_bg.gif);
background-repeat: repeat-y;
}
.inputs{width:110px;
height:16px;
border:solid 1px #666666;
}
.bold{
font-size:18px;
font-weight:bold;
text-align:center;
line-height:35px;
height:35px;
}
.rb1{
height:20x;
color:#fff;
font-size:13px;
background:#d32c47;
padding:3px 10px;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
cursor:pointer;
}
#footer{text-align:center;
color:#333;
line-height:35px;
}
#footer a{
color:#333;
text-decoration:underline;
}
#footer hover{
color:#333;
text-decoration:none;
}
#fileImgHeader,#imgHeader{ margin-right: 5px;
float: left;}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>休闲网注册页面</title>
<link href="css/leisure.css" rel="stylesheet">
</head>
<body>
<div id="header" class="main">
<div id="headerLeft">
<img src="images/logo.gif" />
</div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="main">
<form method="post" name="myform" id="myform">
<h1 class="bold" colspan="2">注册休闲网</h1>
<dl>
<dt class="left">您的Email：</dt>
<dd>
<input type="hidden" name="userId" />
<input id="email" type="text" class="inputs" /></dd>
</dl>
<dl>
<dt class="left">输入密码：</dt>
<dd>
<input id="pwd" type="password" class="inputs" /></dd>
</dl>
<dl>
<dt class="left">再输入一遍密码：</dt>
<dd>
<input id="repwd" type="password" class="inputs" /></dd>
</dl>
<dl>
<dt class="left">您的姓名：</dt>
<dd>
<input id="user" type="text" class="inputs" /></dd>
</dl>
<dl>
<dt class="left">性别：</dt>
<dd>
<input name="sex" type="radio" value="1" checked="checked" />
男
<input name="sex" type="radio" value="0" />
女</dd>
</dl>
<dl>
<dt class="left">出生日期：</dt>
<dd>
<select name="year">
<option value="1998">1998</option>
</select>年
<select name="month">
<option value="1">1</option>
</select>月
<select name="day">
<option value="12">12</option>
</select>日</dd>
</dl>
<dl>
<dt class="left">爱好：</dt>
<dd>
<input type="checkbox" checked="checked" />编程
<input type="checkbox" />读书
<input type="checkbox" />运动
</dd>
</dl>
<dl>
<dt class="left">您的头像：</dt>
<dd>
<input id="fileImgHeader" type="file" />
<img id="imgHeader" src="images/header1.jpg" />
<input type="image" src="images/header2.jpg" /></dd>
</dl>
<dl>
<dt> </dt>
<dd>
<input name="btn" type="submit" value="注册" class="rb1" />
<input name="btn" type="reset" value="重置" class="rb1" />
<input type="button" style="display: none" />
<button type="button" style="display: none"></button>
</dd>
</dl>
</form>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
</body>
</html>
示例2：表单过滤选择器
$("#userform :selected").each(
*{padding:0; margin:0;}
body{
font-size:13px;
color:#000;
line-height:25px;
}
.main{
clear:both;
}
#header{
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
height: 36px;
}
#headerLeft{width:200px;
float:left;
}
#headerRight{width:160px;
float:right;
color:#FFF;
}
.register{padding: 5px;}
.register p{clear: both;}
#footer{text-align:center;
color:#333;
line-height:35px;
}
#footer a{
color:#333;
text-decoration:underline;
}
#footer hover{
color:#333;
text-decoration:none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>休闲网注册页面</title>
<link rel="stylesheet" href="css/regin.css">
</head>
<body>
<div id="header" class="main">
<div id="headerLeft">
<img src="images/logo.gif" />
</div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="register">
<form id="userform" name="userform">
<p>
编号：<input name="code" disabled="disabled" value="10010"/>
</p>
<p>
姓名：<input name="name" type="text" value="张三"/>
</p>
<p>
性别：<input name="sex" type="radio" value="1" checked="checked" /> 男
<input name="sex" type="radio" value="0" />女
</p>
<p>
爱好：
<input type="checkbox" checked="checked" />编程
<input type="checkbox" />读书
<input type="checkbox" />运动
</p>
<p>
家乡：<select name="hometown">
<option value="1" selected="selected">北京</option>
<option value="2">上海</option>
<option value="3">天津</option>
</select>
</p>
</form>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
var html = "";
$("#userform :selected").each(
function () {
html = $("<div></div>").append($(this).clone()).html();
alert(html);
});
//
});
</script>
</body>
</html>
示例3：验证休闲网登录页面
submit
*{padding:0; margin:0;}
body{
font-size:12px;
color:#000;
line-height:25px;
}
ul,li{list-style: none;}
.main{
float:none;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear:both;
}
#header{
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
height: 36px;
}
#headerLeft{width:200px;
float:left;
}
#headerRight{width:160px;
float:right;
color:#FFF;
}
#center{
width:362px;
text-align:center;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
.inputs{width:110px;
height:16px;
border:solid 1px #666666;
}
.bold{
font-size:18px;
font-weight:bold;
text-align:center;
line-height:45px;
height:45px;
}
.rb1{
height:20px;
color:#fff;
font-size:13px;
background:#d32c47;
padding:3px 10px;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
cursor:pointer;
}
.register{width: 350px; margin: 5px auto; border: 1px #cccccc solid; border-radius: 5px; background: #efefef; clear: both;}
.register li{height: 35px; line-height: 35px;}
.register span{display: inline-block; width: 80px; text-align: right;}
.register li:last-of-type{padding-left: 90px;}
#footer{text-align:center;
color:#333;
line-height:35px;
}
#footer a{
color:#333;
text-decoration:underline;
}
#footer:hover{
color:#333;
text-decoration:none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>休闲网登录页面</title>
<link href="css/register.css" rel="stylesheet">
</head>
<body>
<div id="header" class="main">
<div id="headerLeft">
<img src="images/logo.gif" /></div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="register">
<form action="success.html" id="myform" method="post" name="myform" >
<ul>
<li class="bold">登录休闲网</li>
<li><span>Email：</span><input type="text" class="inputs" /></li>
<li><span>密码：</span><input type="password" class="inputs" /></li>
<li><input name="btn" id="btn" type="submit" value="登录" class="rb1" /></li>
</ul>
</form>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
var mail = $("#myform :text").val();
if (mail=="") {//检测Email是否为空
alert("Email不能为空");
return false;
}
if (mail.indexOf("@") == -1) {
alert("Email格式不正确\n必须包含@");
return false;
}
if (mail.indexOf(".") == -1) {
alert("Email格式不正确\n必须包含.");
return false;
}
return true;
})
})
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>休闲网登录成功页面</title>
<link href="css/register.css" rel="stylesheet">
</head>
<body>
<div id="header" class="main">
<div id="headerLeft"><img src="images/logo.gif"/></div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="main">
<h1 class="bold">祝贺你，登录休闲网成功！</h1>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
</body>
</html>
示例4：休闲网注册验证
*{padding:0; margin:0;}
body{
font-size:13px;
color:#000;
line-height:25px;
}
.main{
float:none;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear:both;
}
#header{
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
height: 36px;
}
#headerLeft{width:200px;
float:left;
}
#headerRight{width:160px;
float:right;
color:#FFF;
}
#center{
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
width:100%;
}
.register{margin: 0 auto; width: 350px; clear: both;}
.register dl dt{width:35%;
text-align:right;
height:25px;
float: left;
}
.register dl dd img{vertical-align: middle;}
.bg{
background-image: url(../images/dl_l_bg.gif);
background-repeat: repeat-y;
}
.inputs{width:110px;
height:16px;
border:solid 1px #666666;
}
.bold{
font-size:18px;
font-weight:bold;
text-align:center;
line-height:35px;
height:35px;
}
.rb1{
height:20px;
color:#fff;
font-size:13px;
background:#d32c47;
padding:3px 10px;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
cursor:pointer;
}
#footer{text-align:center;
color:#333;
line-height:35px;
}
#footer a{
color:#333;
text-decoration:underline;
}
#footer hover{
color:#333;
text-decoration:none;
}
#fileImgHeader,#imgHeader{ margin-right: 5px;
float: left;}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>休闲网注册页面</title>
<link href="css/leisure.css" rel="stylesheet">
</head>
<body>
<div id="header" class="main">
<div id="headerLeft">
<img src="images/logo.gif" />
</div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="register">
<form method="post" name="myform" id="myform">
<h1 class="bold">注册休闲网</h1>
<dl>
<dt>您的Email：</dt>
<dd><input id="email" type="text" class="inputs" /></dd>
</dl>
<dl>
<dt>输入密码：</dt>
<dd><input id="pwd" type="password" class="inputs" /></dd>
</dl>
<dl>
<dt>再输入一遍密码：</dt>
<dd><input id="repwd" type="password" class="inputs" /></dd>
</dl>
<dl>
<dt>您的姓名：</dt>
<dd><input id="user" type="text" class="inputs" /></dd>
</dl>
<dl>
<dt>性别：</dt>
<dd>
<input name="sex" type="radio" value="1" checked="checked" />男
<input name="sex" type="radio" value="0" />女</dd>
</dl>
<dl>
<dt class="left">出生日期：</dt>
<dd><select name="year">
<option value="1998">1998</option>
</select>年
<select name="month">
<option value="1">1</option>
</select>月
<select name="day">
<option value="12">12</option>
</select>日</dd>
</dl>
<dl>
<dt> </dt>
<dd><input name="btn" type="submit" value="注册" class="rb1" /></dd>
</dl>
</form>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("#myform").submit(function(){
var pwd = $("#pwd").val();
if (pwd == "") {
alert("密码不能为空");
return false;
}
if (pwd.length < 6) {
alert("密码必须等于或大于6个字符");
return false;
}
var repwd = $("#repwd").val();
if (pwd != repwd) {
alert("两次输入的密码不一致");
return false;
}
var user = $("#user").val();
if (user == "") {
alert("姓名不能为空");
return false;
}
for (var i = 0; i < user.length; i++) {
var j = user.substring(i, i + 1);
if (isNaN(j) == false) {
alert("姓名中不能包含数字");
return false;
}
}
return true;
})
})
</script>
</body>
</html>
示例5：动态改变文本框效果focus
*{padding:0; margin:0;}
body{
font-size:12px;
color:#000;
line-height:25px;
}
ul,li{list-style: none;}
.main{
float:none;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear:both;
}
#header{
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
height: 36px;
}
#headerLeft{width:200px;
float:left;
}
#headerRight{width:160px;
float:right;
color:#FFF;
}
#center{
width:362px;
text-align:center;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
.inputs{width:150px;
height:16px;
border:solid 1px #666666;
}
.bold{
font-size:18px;
font-weight:bold;
text-align:center;
line-height:45px;
height:45px;
}
.rb1{
height:20px;
color:#fff;
font-size:13px;
background:#d32c47;
padding:3px 10px;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
cursor:pointer;
}
.register{width: 350px; margin: 5px auto; border: 1px #cccccc solid; border-radius: 5px; background: #efefef; clear: both;}
.register li{height: 35px; line-height: 35px;}
.register span{display: inline-block; width: 80px; text-align: right;}
.register li:last-of-type{padding-left: 90px;}
#footer{text-align:center;
color:#333;
line-height:35px;
}
#footer a{
color:#333;
text-decoration:underline;
}
#footer:hover{
color:#333;
text-decoration:none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>休闲网登录页面成功</title>
<link href="css/register.css" rel="stylesheet">
</head>
<body>
<div id="header" class="main">
<div id="headerLeft"><img src="images/logo.gif"/></div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="main">
<table id="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bold">祝贺你，登录休闲网成功！</td>
</tr>
</table>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>休闲网登录页面</title>
<link href="css/register.css" rel="stylesheet">
</head>
<body>
<div id="header" class="main">
<div id="headerLeft">
<img src="images/logo.gif" /></div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="register">
<form action="success.html" id="myform" method="post" name="myform" >
<ul>
<li class="bold">登录休闲网</li>
<li><span>Email：</span><input type="text" class="inputs" value="请输入正确的电子邮箱" /></li>
<li><span>密码：</span><input type="password" class="inputs" /></li>
<li><input name="btn" id="btn" type="submit" value="登录" class="rb1" /></li>
</ul>
</form>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("#myform").submit(function () {
var mail = $("#myform :text").val();
if (mail == "") {//检测Email是否为空
alert("Email不能为空");
$("#myform :text").focus();
return false;
}
if (mail.indexOf("@") == -1 || mail.indexOf(".") == -1) {
alert("Email格式不正确\n必须包含符号@和.");
$("#myform :text").select();
return false;
}
return true;
});
})
$("#myform :text").focus(function(){
if ($(this).val() == "请输入正确的电子邮箱") {
$(this).val("");
$(this).css("border", "1px solid #ff0000");
}
});
</script>
</body>
</html>
示例6：文本输入提示特效
var $divID = $("#DivEmail");
$divID.html("");
if ($mail.val() == "") {
$divID.html("Email不能为空");
*{padding:0; margin:0;}
body{
font-size:13px;
color:#000;
line-height:25px;
}
.main{
float:none;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear:both;
}
#header{
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
height: 36px;
}
#headerLeft{width:200px;
float:left;
}
#headerRight{width:160px;
float:right;
color:#FFF;
}
#center{
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
width:100%;
}
.register{margin: 0 auto; width: 500px; clear: both;}
.register dl dt{width:30%;
text-align:right;
height:25px;
float: left;
}
.register dl dd img{vertical-align: middle;}
.bg{
background-image: url(../images/dl_l_bg.gif);
background-repeat: repeat-y;
}
.inputs{width:150px;
height:16px;
border:solid 1px #666666;
}
.register dl dd span{
color:#F00;
padding-left:5px;
}
.bold{
font-size:18px;
font-weight:bold;
text-align:center;
line-height:35px;
height:35px;
}
.rb1{
height:20px;
color:#fff;
font-size:13px;
background:#d32c47;
padding:3px 10px;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
cursor:pointer;
}
#footer{text-align:center;
color:#333;
line-height:35px;
}
#footer a{
color:#333;
text-decoration:underline;
}
#footer hover{
color:#333;
text-decoration:none;
}
#fileImgHeader,#imgHeader{ margin-right: 5px;
float: left;}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>休闲网注册页面</title>
<link href="css/leisure.css" rel="stylesheet">
</head>
<body>
<div id="header" class="main">
<div id="headerLeft">
<img src="images/logo.gif" />
</div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="register">
<form method="post" name="myform" id="myform">
<h1 class="bold">注册休闲网</h1>
<dl>
<dt>您的Email：</dt>
<dd><input id="email" type="text" class="inputs" /><span id="DivEmail"></span></dd>
</dl>
<dl>
<dt>输入密码：</dt>
<dd><input id="pwd" type="password" class="inputs" /><span id="DivPwd"></span></dd>
</dl>
<dl>
<dt>再输入一遍密码：</dt>
<dd><input id="repwd" type="password" class="inputs" /><span id="DivRepwd"></span></dd>
</dl>
<dl>
<dt>您的姓名：</dt>
<dd><input id="user" type="text" class="inputs" /><span id="DivUser"></span></dd>
</dl>
<dl>
<dt>性别：</dt>
<dd>
<input name="sex" type="radio" value="1" checked="checked" />男
<input name="sex" type="radio" value="0" />女</dd>
</dl>
<dl>
<dt class="left">出生日期：</dt>
<dd><select name="year">
<option value="1998">1998</option>
</select>年
<select name="month">
<option value="1">1</option>
</select>月
<select name="day">
<option value="12">12</option>
</select>日</dd>
</dl>
<dl>
<dt> </dt>
<dd><input name="btn" type="submit" value="注册" class="rb1" /></dd>
</dl>
</form>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
//绑定失去焦点事件
$("#email").blur(checkEmail);
$("#pwd").blur(checkPass);
$("#repwd").blur(checkRePass);
$("#user").blur(checkUser);
//提交表单,调用验证函数
$("#myform").submit(function () {
var flag = true;
if (!checkEmail()) flag = false;
if (!checkPass()) flag = false;
if (!checkRePass()) flag = false;
if (!checkUser()) flag = false;
return flag;
});
})
//验证Email
function checkEmail() {
var $mail = $("#email");
var $divID = $("#DivEmail");
$divID.html("");
if ($mail.val() == "") {
$divID.html("Email不能为空");
return false;
}
if ($mail.val().indexOf("@") == -1) {
$divID.html("Email格式不正确，必须包含@");
return false;
}
if ($mail.val().indexOf(".") == -1) {
$divID.html("Email格式不正确，必须包含.");
return false;
}
return true;
}
//验证输入密码
function checkPass() {
var $pwd = $("#pwd");
var $divID = $("#DivPwd");
$divID.html("");
if ($pwd.val() == "") {
$divID.html("密码不能为空");
return false;
}
if ($pwd.val().length < 6) {
$divID.html("密码必须等于或大于6个字符");
return false;
}
return true;
}
//验证重复密码
function checkRePass() {
var $pwd = $("#pwd"); //输入密码
var $repwd = $("#repwd"); //再次输入密码
var $divID = $("#DivRepwd");
$divID.html("");
if ($pwd.val() != $repwd.val()) {
$divID.html("两次输入的密码不一致");
return false;
}
return true;
}
//验证用户名
function checkUser() {
var $user = $("#user");
var $divID = $("#DivUser");
$divID.html("");
if ($user.val() == "") {
$divID.html("姓名不能为空");
return false;
}
for (var i = 0; i < $user.val().length; i++) {
var j = $user.val().substring(i, i + 1)
if (j >= 0) {
$divID.html("姓名中不能包含数字");
return false;
}
}
return true;
}
</script>
</body>
</html>
示例7：验证邮编和手机号码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证邮编和手机号码</title>
<style type="text/css">
body {
line-height: 25px;
}
input {
width: 120px;
height: 16px;
}
div {
color: #F00;
font-size: 12px;
display: inline-block;
padding-left: 5px;;
}
ul,li{list-style: none;}
</style>
</head>
<body>
<ul>
<li>邮政编码：<input id="code" type="text" /><div id="divCode"></div></li>
<li>手机号码：<input id="mobile" type="text" /><div id="divMobile"></div></li>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("#code").blur(function(){
var code = $(this).val();
var $codeId = $("#divCode");
var regCode = /^\d{6}$/;
if (regCode.test(code) == false) {
$codeId.html("邮政编码不正确，请重新输入");
return false;
}
$codeId.html("");
return true;
});
$("#mobile").blur(function(){
var mobile = $(this).val();
var $mobileId = $("#divMobile");
var regMobile = /^1\d{10}$/;
if (regMobile.test(mobile) == false) {
$mobileId.html("手机号码不正确，请重新输入");
return false;
}
$mobileId.html("");
return true;
})
})
</script>
</body>
</html>
示例8：验证年龄
.<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证年龄</title>
<style type="text/css">
span{color: #ff0000; padding-left: 5px; font-size: 12px;}
</style>
</head>
<body>
年龄： <input id="age" type="text"/><span id="divAge"></span>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("#age").blur(function(){
var age = $(this).val();
var $ageId = $("#divAge");
var regAge = /^120$|^((1[0-1]|[1-9])?\d)$/m;
if (regAge.test(age) == false) {
$ageId.html("年龄不正确，请重新输入");
return false;
}
$ageId.html("");
return true;
})
})
</script>
</body>
</html>
示例9：QQ注册验证setCustomValidity
*{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;
}
/**
* Created by zongjuan.wang on 2016/7/6.
*/
$(document).ready(function(){
$("#submit").click(function(){
var u=document.getElementById("uName");
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");
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");
if(email.validity.valueMissing==true){
email.setCustomValidity("邮箱不能为空");
}
else if(email.validity.typeMismatch==true){
email.setCustomValidity("邮箱格式不正确");
}
else{
email.setCustomValidity("");
}
})
})
<!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>
#项目案例
制作1号店网站网页特效
在网页中如何获取当前元素的父元素、同辈元素和子元素？
如何实现无序列表中前三行内容显示红色，后两行背景显示灰色？
在jQuery中如何实现元素的显示和隐藏？
在jQuery中如何为元素添加样式和移除样式？
课件
扫一扫
787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
