先看效果：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<fieldset>
<legend>表单验证</legend>
<form id="myform" name="myform" onsubmit=" return formValidator();">
<table >
<tr>
<td>用户名：</td>
<td><input type="text" id="user"></td>
<!--用于提示的div-->
<td><div id="userTip"></div></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="pwd"></td>
<!--用于提示的div-->
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" id="repwd"></td>
<!--用于提示的div-->
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td>email地址：</td>
<td><input type="text" id="email"></td>
<!--用于提示的div-->
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td><input type="submit" value="注册" id="rigist"></td>
</tr>
</table>
</form>
</fieldset>
<script>
var userVal=$("#user").val();
$("#user").focus(function () {
$("#userTip").text("请输入英文或数字，长度为6--12").css({
"color": "black",
"font-family": "normal"
});
}).blur( userValidator);//这里的函数不用加括号
//2.密码验证
$("#pwd").focus(function () {
$("#pwdTip").text("请输入英文，长度在6至8之间").css({
"color": "black",
"font-family": "normal"
});
}).blur(pwdValidator);//这里的函数不用加括号
//3.重复密码验证
$("#repwd").focus(function () {
$("#repwdTip").text("请输入英文，长度在6至8之间").css({
"color": "black",
"font-family": "normal"
});
}).blur( repwdValidator);//这里的函数不用加括号
//4.email验证
$("#email").focus(function () {
$("#emailTip").text("请输入email").css({
"color": "black",
"font-family": "normal"
});
}).blur(emailValidator);//这里的函数不用加括号
//表单提交验证
function userValidator () {
var regExp = /^[a-zA-Z0-9]{6,12}$/;
var reg=/^[a-z0-9_-]{3,16}$/;
var $myVal = $("#user").val();
if ($myVal == "" || $myVal == null)
{
$("#userTip").text("用户名不能为空").css({
"color": "red",
"font-family": "bold"
});
return false;
}
//正则表达式匹配
else if(!regExp.test($myVal))
{
$("#userTip").text("用户名输入错误").css({
"color": "red",
"font-family": "bold"
});
return false;
}
else {
$("#userTip").text("用户名输入正确").css({
"color": "green",
"font-family": "bold"
});
return true;
}
}
function pwdValidator() {
var $myPwdVal=$("#pwd").val();
var regExp=/^[a-zA-Z]{6,8}$/
if($myPwdVal==""||$myPwdVal==null)
{
$("#pwdTip").text("密码不能为空").css({
"color": "red",
"font-family": "bold"
});
return false;
}
else if(!regExp.test($myPwdVal))
{
$("#pwdTip").text("密码输入错误").css({
"color": "red",
"font-family": "bold"
});
return false;
}
else{
$("#pwdTip").text("密码输入正确").css({
"color": "green",
"font-family": "bold"
});
return true;
}
}
function repwdValidator() {
var $myPwdVal=$("#pwd").val();
var regExp=/^[a-zA-Z]{6,8}$/
var $myrePwdVal=$("#repwd").val();
if($myPwdVal==""||$myPwdVal==null)
{
$("#repwdTip").text("密码不能为空").css({
"color": "red",
"font-family": "bold"
});
return false;
}
else if(!regExp.test($myPwdVal))
{
$("#repwdTip").text("密码输入错误").css({
"color": "red",
"font-family": "bold"
});
return false;
}
//两次密码输入是否一致
else if($myPwdVal!=$myrePwdVal)
{
$("#repwdTip").text("密码输入不一致").css({
"color": "red",
"font-family": "bold"
});
return false;
}
else{
$("#repwdTip").text("密码输入正确").css({
"color": "green",
"font-family": "bold"
});
return true;
}
}
function emailValidator() {
if($("#email").val()==""||$("#email").val()==null)
{
$("#emailTip").text("email不能为空").css({
"color": "red",
"font-family": "bold"
});
return false;
}
else
{
$("#emailTip").text("email输入正确").css({
"color": "green",
"font-family": "bold"
});
return true;
}
}
<!--防止错误提交的验证-->
function formValidator() {
if(userValidator()&&pwdValidator()&&repwdValidator()&&emailValidator()){
alert("验证成功");
return true;
}
else{
alert("验证失败");
return false;
}
}
</script>
</body>
</html>
//以上代码有不明白的可以评论，一起学习！
注意：本文归作者所有，未经作者允许，不得转载
