(模仿京东用户注册)用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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery实现购物车全功能
Jan 11 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
SONY SRF-40W电路分析
2021/03/02 无线电
点评山进PR-D3L三波段收音机
2021/03/02 无线电
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
javascript动态加载三
2012/08/22 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
js获取Get值的方法
2016/09/29 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Django框架实现逆向解析url的方法
2018/07/04 Python
机修工工作职责
2014/02/21 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
苏州园林导游词
2015/02/03 职场文书
个人借条范本
2015/05/25 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
导游词之湖北武当山
2019/09/23 职场文书