(模仿京东用户注册)用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实现简单的手风琴效果
Apr 17 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
Jquery Fade用法详解
Nov 06 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
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
vue中 this.$set的用法详解
2019/09/06 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
Python常用断言函数实例汇总
2020/11/30 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
趣味比赛活动方案
2014/02/15 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
使用Redis做预定库存缓存功能
2022/04/02 Redis
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android