写文章

jQuery用户登录和注册表单验证代码实例

快乐打工仔 分类：实例代码

本章节分享一段简单的代码实例，它实现了用户登录或者注册之类表单的验证效果。

虽然简单，但是可以满足一些简单的实际需求，代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body {
font-family: Arial, "宋体", Lucida, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #333;
line-height: 150%;
background: #f2f2f2;
}
.hide {
display: none;
}
.focus, .error {
color: #e4393c;
line-height: 36px;
height: 36px;
position: absolute;
top: 0px;
width: 260px;
padding: 0 5px;
background: #FFEBEB;
border: 1px solid #ffbdbe;
}
.error span, .focus span {
padding: 5px 0;
line-height: 13px;
display: block;
}
.focus {
color: #666;
width: 260px;
line-height: 36px;
background: #f7f7f7;
border: 1px solid #dddddd;
}
.regist {
width: 990px;
padding: 0;
margin: 0 auto;
zoom: 1;
}
.mc {
padding: 30px 0 20px;
border: solid #dddddd;
border-width: 0px 1px 1px;
background: #FFF;
overflow: hidden;
zoom: 1;
border-width: 0px 1px 1px;
}
.form {
float: left;
width: 750px;
font-size: 12px;
}
.form label, .form input, .form select, .form textarea, .form button, .form .label {
float: left;
font-size: 12px;
}
.item {
padding-top: 9px;
height: 60px;
line-height: 34px;
position: relative;
z-index: 1;
}
.label {
float: left;
width: 190px;
text-align: right;
font-size: 14px;
color: #999;
padding-right: 10px;
}
.input {
float: left;
position: relative;
width: 270px;
overflow: visible;
}
.text {
float: none;
width: 275px;
height: 37px;
line-height: 32px;
border: 1px solid #cccccc;
font-size: 14px;
font-family: arial, "宋体";
overflow: hidden;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function () {
// 1. 用户名
$("#username").focus(function () {
/* 获取焦点
var username_msg = $("#username_msg");
username_msg.text("4-20位字符，支持英文、数字及'-'、'_'组合");
username_msg.attr("class","focus");
*/
elemFocus("username_msg", "4-20位字符，支持英文、数字及'-'、'_'组合");
}).blur(userValidator);
// 2. 密码
$("#password").focus(function () {
elemFocus("pwd_msg", "6-20位字符，可使用字母、数字的组合");
}).blur(pwdValidator);
// 3. 确认密码
$("#pwdRepeat").focus(function () {
elemFocus("pwdRepeat_msg", "6-20位字符，可使用字母、数字的组合");
}).blur(pwdRepeatValidator);
// 4. Email
$("#mail").focus(function () {
elemFocus("mail_msg", "完成验证后，可以使用该邮箱登录和找回密码");
}).blur(emailValidator);
$("#registsubmit").click(function () {
return validateForm();
})
})
// 定义函数 - 通用的信息提示
function elemFocus(eleId, text) {
var ele_msg = $("#" + eleId);
ele_msg.text(text);
ele_msg.attr("class", "focus");
}
// 定义验证用户名的函数
function userValidator() {
// 获取用户名输入的值
var value = $("#username").val();
// 获取用于显示提示信息的元素
var username_msg = $("#username_msg");
// 验证逻辑
if (value == "" || value == null) {
username_msg.text("用户名不能为空");
username_msg.attr("class", "error");
return false;
} else if (value.length < 4 || value.length > 20) {
username_msg.text("用户名的长度不正确");
username_msg.attr("class", "error");
return false;
} else if (!/^[a-zA-Z0-9-_]{4,20}$/.test(value)) {
username_msg.text("用户名输入不正确");
username_msg.attr("class", "error");
return false;
}
// 验证通过修改正确样式
if (!username_msg.hasClass("hide")) {
username_msg.text("");
username_msg.attr("class", "hide");
}
return true;
}
// 定义验证密码的函数
function pwdValidator() {
var value = $("#password").val();
var pwd_msg = $("#pwd_msg");
if (value == "" || value == null) {
pwd_msg.text("密码不能为空");
pwd_msg.attr("class", "error");
return false;
} else if (value.length < 6 || value.length > 20) {
pwd_msg.text("密码的长度不正确");
pwd_msg.attr("class", "error");
return false;
} else if (!/^[a-zA-Z0-9]{6,20}$/.test(value)) {
pwd_msg.text("密码输入不正确");
pwd_msg.attr("class", "error");
return false;
}
if (!pwd_msg.hasClass("hide")) {
pwd_msg.text("");
pwd_msg.attr("class", "hide");
}
return true;
}
// 定义确认密码验证的函数
function pwdRepeatValidator() {
var value = $("#pwdRepeat").val();
var pwdRepeat_msg = $("#pwdRepeat_msg");
var pwd = $("#password").val();
if (value == "" || value == null) {
pwdRepeat_msg.text("密码不能为空");
pwdRepeat_msg.attr("class", "error");
return false;
} else if (value.length < 6 || value.length > 20) {
pwdRepeat_msg.text("密码的长度不正确");
pwdRepeat_msg.attr("class", "error");
return false;
} else if (!/^[a-zA-Z0-9]{6,20}$/.test(value)) {
pwdRepeat_msg.text("密码输入不正确");
pwdRepeat_msg.attr("class", "error");
return false;
} else if (value != pwd) {
pwdRepeat_msg.text("两次密码输入不一致");
pwdRepeat_msg.attr("class", "error");
return false;
}
if (!pwdRepeat_msg.hasClass("hide")) {
pwdRepeat_msg.text("");
pwdRepeat_msg.attr("class", "hide");
}
return true;
}
// 定义Email验证的函数
function emailValidator() {
var value = $("#mail").val();
var email_msg = $("#mail_msg");
if (value == "" || value == null) {
email_msg.text("Email不能为空");
email_msg.attr("class", "error");
return false;
} else if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
email_msg.text("Email格式不正确");
email_msg.attr("class", "error");
return false;
}
if (!email_msg.hasClass("hide")) {
email_msg.text("");
email_msg.attr("class", "hide");
}
return true;
}
function validateForm() {
if (!userValidator() || !pwdValidator() || !pwdRepeatValidator() || !emailValidator()) {
return false;
}
return true;
}
</script>
</head>
<body>
<div class="regist">
<div class="mc">
<form id="personRegForm" class="form" action="login.html" method="post">
<div class="item">
<span class="label">用户名：</span>
<div class="input">
<input type="text" id="username" name="username" class="text">
<label id="username_msg" class="hide"></label>
</div>
</div>
<div class="item">
<span class="label">请设置密码：</span>
<div class="input">
<input type="password" id="password" name="password" class="text">
<label id="pwd_msg" class="hide"></label>
</div>
</div>
<div class="item">
<span class="label">请确认密码：</span>
<div class="input">
<input type="password" id="pwdRepeat" name="pwdRepeat" class="text">
<label id="pwdRepeat_msg" class="hide"></label>
</div>
</div>
<div class="item">
<span class="label">验证邮箱：</span>
<div class="input">
<input type="text" id="mail" name="mail" class="text">
<label id="mail_msg" class="hide"></label>
</div>
</div>
<div class="item">
<span class="label"> </span>
<input type="submit" class="btn-img" id="registsubmit" value="立即注册" />
</div>
</form>
</div>
</div>
</body>
</html>

jQuery用户登录和注册表单验证代码实例，这样的场景在实际项目中还是用的比较多的，关于jQuery用户登录和注册表单验证代码实例就介绍到这了。

jQuery用户登录和注册表单验证代码实例属于前端实例代码，有关更多实例代码大家可以查看。

回复

我来回复

  • 暂无回复内容