(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看


Posted in jQuery onJanuary 08, 2018

说明:

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 相关文章推荐
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
基于jquery实现五星好评
Nov 18 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 #jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 #jQuery
jQuery中库的引用方法
Jan 06 #jQuery
jQuery封装animate.css的实例
Jan 04 #jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 #jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
You might like
async和DOM Script文件加载比较
2014/07/20 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
ASP Json Parser修正版
2009/12/06 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
js实现简单模态框实例
2018/11/16 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
js实现小星星游戏
2020/03/23 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
python将unicode转为str的方法
2017/06/21 Python
详解Python如何生成词云的方法
2018/06/01 Python
django_orm查询性能优化方法
2018/08/20 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
上学迟到的检讨书
2014/01/11 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
实习工作表现评语
2014/12/31 职场文书