一、表单验证的事件和方法
image.png
示例代码：
// 获得焦点之后给输入框添加格式
$("#myform :text").focus(function(){
if ($(this).val() == "请输入正确的电子邮箱") {
$(this).val("");
$(this).css("border", "5px solid #ff0000");
}
});
二、文本输入提示特效
实现思路：
1、当文本框失去焦点的时候获取里面的值，进行判断
2、如果不符合要求，则在html文件中该文本框后面的span标签中写入错误的原因
注：将验证方法单独写出来作为一个函数，这样可以在相应的文本框失去焦点的时候立即进行验证，同时早提交的时候可以重复调用函数。
示例代码：
<!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>
运行结果：
image.png
三、总结
image.png
