(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
更新时间：2018年01月08日 14:39:42 作者：NaMgAl_
下面小编就为初学者们分享一篇(模仿京东用户注册)用JQuery实现简单表单验证，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
说明：
1. 代码中的js脚本文件路径需替换为自己的目录文件
2. 代码中加入了ajax验证账号是否存在
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单验证</title>
<style type="text/css">
font {
font-size: 10px;
}
.info {
color: #AAAAAA;
}
.errormsg {
color: #FF3030;
}
.errorinput {
border-color: #FF3030;
border-width: 1px;
}
.ok {
color: #32CD32;
}
</style>
<script type="text/javascript" src="/airticleMgr/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//账号是否验证过
var accountIsChecked = false;
var accountIsOK = false;
var passwdIsOK = false;
var confirmpwdIsOK = false;
var phoneIsOK = false;
$(function() {
// 验证账号
$("#account").focus(function() {
focus_checkaccount();
}).keyup(
function() {
$("#accountmsg").text("支持中文、字母、数字组合").removeClass()
.addClass("info");
accountIsChecked = false;
}).blur(function() {
blur_checkaccount();
})
// 验证密码
$("#pwd").focus(function() {
$("#pwdmsg").text("建议使用数字和字母的组合").removeClass().addClass("info");
}).blur(function() {
blur_checkpwd();
blur_confirmpwd();
});
// 验证二次密码
$("#confirmpwd").focus(function() {
$("#confirmmsg").text("请再次确认密码").removeClass().addClass("info");
}).blur(function() {
blur_confirmpwd();
});
// 验证手机号码
$("#phone").focus(function() {
$("#phonemsg").text("建议输入常用手机").removeClass().addClass("info");
}).blur(function() {
blur_checkphone();
})
});
function focus_checkaccount() {
if (!accountIsChecked) {
$("#accountmsg").text("支持中文、字母、数字组合").removeClass()
.addClass("info");
}
}
function blur_checkaccount() {
var account = $("#account").val();
if (account != "") {
// 判断account是否验证过
if (!accountIsChecked) {
// 未验证过，则进行验证
ajax_checkaccount(account);
}
} else {
$("#accountmsg").text("");
accountIsOK = false;
}
}
// ajax请求验证account
function ajax_checkaccount(account) {
$.get("/airticleMgr/member", {
m : "checkAccount",
account : account
}, function(data) {
if ("true" == data) {
$("#accountmsg").text("该账号已被注册").removeClass().addClass(
"errormsg");
accountIsOK = false;
} else {
$("#accountmsg").text("√").removeClass().addClass("ok");
accountIsOK = true;
}
});
accountIsChecked = true;
}
function blur_checkpwd() {
var lpwd = $("#pwd").val().length;
if (lpwd > 0) {
if (lpwd < 6) {
$("#pwdmsg").text("长度在6-20位之间").removeClass().addClass(
"errormsg");
passwdIsOK = false;
} else {
$("#pwdmsg").text("√").removeClass().addClass("ok");
passwdIsOK = true;
}
} else {
$("#pwdmsg").text("");
passwdIsOK = false;
}
}
function blur_confirmpwd() {
var pwd = $("#pwd").val();
var confirmpwd = $("#confirmpwd").val();
if (confirmpwd != "") {
if (confirmpwd == pwd) {
$("#confirmmsg").text("√").removeClass().addClass("ok");
confirmpwdIsOK = true;
} else {
$("#confirmmsg").text("两次密码输入不一致").removeClass().addClass(
"errormsg");
confirmpwdIsOK = false;
}
} else {
$("#confirmmsg").text("");
confirmpwdIsOK = false;
}
}
function blur_checkphone() {
var phone = $("#phone").val();
var regix = /^1[34578][0-9]{9}$/;
if (phone != "") {
if (!regix.test(phone)) {
$("#phonemsg").text("手机格式有误").removeClass()
.addClass("errormsg");
phoneIsOK = false;
} else {
$("#phonemsg").text("√").removeClass().addClass("ok");
phoneIsOK = true;
}
} else {
$("#phonemsg").text("");
phoneIsOK = false;
}
}
// 表单验证
function check_form() {
if (!accountIsOK) {
if ($("#account").val() == "") {
$("#accountmsg").text("请输入账号").removeClass().addClass(
"errormsg");
} else {
}
return false;
}
if (!passwdIsOK) {
if ($("#pwd").val() == "") {
$("#pwdmsg").text("请输入密码").removeClass().addClass("errormsg");
} else {
}
return false;
}
if (!confirmpwdIsOK) {
if ($("#confirmpwd").val() == "") {
$("#confirmmsg").text("请再次输入密码").removeClass().addClass(
"errormsg");
} else {
}
return false;
}
if (!phoneIsOK) {
if ($("#phone").val() == "") {
$("#phonemsg").text("请输入手机").removeClass().addClass("errormsg");
} else {
}
return false;
}
if (accountIsOK && passwdIsOK && confirmpwdIsOK && phoneIsOK) {
alert("欢迎注册");
return true;
} else {
alert("请检查信息");
return false;
}
}
</script>
</head>
<body>
<h2>会员注册</h2>
<form action="/airticleMgr/member?m=regist" method="post"
onsubmit="return check_form()">
<table>
<tr height="30px">
<td>帐 号：</td>
<td><input type="text" id="account" name="account"
placeholder="您的登录账号"></td>
<td><font id="accountmsg"></font></td>
</tr>
<tr height="30px">
<td>设置密码：</td>
<td><input type="password" id="pwd" name="pwd"
placeholder="设置您的密码" maxlength="20"></td>
<td><font id="pwdmsg"></font></td>
</tr>
<tr height="30px">
<td>确认密码：</td>
<td><input type="password" id="confirmpwd" name="confirmpwd"
placeholder="确认您的密码" maxlength="20"></td>
<td><font id="confirmmsg"></font></td>
</tr>
<tr height="30px">
<td>手 机：</td>
<td><input type="text" id="phone" name="phone"
placeholder="您的手机号码"></td>
<td><font id="phonemsg"></font></td>
</tr>
<tr height="7px"></tr>
<tr>
<td colspan="2" align="center"><input type="submit"
value="立即注册"
style="height: 30px; width: 100%; background-color: #FF3030; color: white; border: 0">
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
以上这篇(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在jquery中经常需要获取form表单的一些值，下面是常用的代码，需要的朋友可以参考下。2009-12-12
使用基于jquery的gamequery插件做JS乒乓球游戏
现在jquery比较流行，用js做游戏的也越来越多了，虽然现在html5出来了，但实际上要用html5做点啥出来还是得靠javascript，所以学好js是非常重要的2011-07-07
这篇文章主要介绍了jQuery中的类名选择器（.class）用法,简单介绍了jQuery类名选择器的概念、原理并结合实例形式分析了类选择器的简单使用方法,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了jQuery实现菜单式图片滑动切换效果，主要是依托于jQuery Lightbox插件来实现，非常炫酷，这里推荐给小伙伴们2015-03-03
这篇文章主要介绍了jQuery进行组件开发的方法,以完整实例形式分析了基于jQuery实现自定义组件的相关技巧,代码备有详尽的注释便于理解,需要的朋友可以参考下2015-12-12
jQuery Password Validation密码验证
这篇文章主要介绍了jQuery Password Validation密码验证的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了如何简单实现jQuery级联菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
点击一个下拉框，则另一个下拉框的值发生对应变化。如：选择中国，则另个一下拉框里显示中国各个省份，具体实现如下，感兴趣的朋友可以参考下2013-09-09
jquery插件开发基础：开发jQuery 插件的基本格式,开发全局函数的基本格式，接下来为您详细介绍，感兴趣的朋友可以了解哦2013-01-01
jquery的东西也算不少，记下来有助于以后参考。这样也挺方便。2010-11-11
最新评论