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

2023-09-18 06:10:06 165

说明：

1.代码中的js脚本文件路径需替换为自己的目录文件

2.代码中加入了ajax验证账号是否存在

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>




表单验证

font{
font-size:10px;
}

.info{
color:#AAAAAA;
}

.errormsg{
color:#FF3030;
}

.errorinput{
border-color:#FF3030;
border-width:1px;
}

.ok{
color:#32CD32;
}



//账号是否验证过
varaccountIsChecked=false;

varaccountIsOK=false;
varpasswdIsOK=false;
varconfirmpwdIsOK=false;
varphoneIsOK=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();
})
});

functionfocus_checkaccount(){
if(!accountIsChecked){
$("#accountmsg").text("支持中文、字母、数字组合").removeClass()
.addClass("info");
}
}

functionblur_checkaccount(){
varaccount=$("#account").val();
if(account!=""){
//判断account是否验证过
if(!accountIsChecked){
//未验证过，则进行验证
ajax_checkaccount(account);
}
}else{
$("#accountmsg").text("");
accountIsOK=false;
}
}

//ajax请求验证account
functionajax_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;
}

functionblur_checkpwd(){
varlpwd=$("#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;
}
}

functionblur_confirmpwd(){
varpwd=$("#pwd").val();
varconfirmpwd=$("#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;
}
}

functionblur_checkphone(){
varphone=$("#phone").val();
varregix=/^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;
}

}

//表单验证
functioncheck_form(){

if(!accountIsOK){
if($("#account").val()==""){
$("#accountmsg").text("请输入账号").removeClass().addClass(
"errormsg");
}else{
}
returnfalse;
}

if(!passwdIsOK){
if($("#pwd").val()==""){
$("#pwdmsg").text("请输入密码").removeClass().addClass("errormsg");
}else{
}
returnfalse;
}

if(!confirmpwdIsOK){
if($("#confirmpwd").val()==""){
$("#confirmmsg").text("请再次输入密码").removeClass().addClass(
"errormsg");
}else{
}
returnfalse;
}

if(!phoneIsOK){
if($("#phone").val()==""){
$("#phonemsg").text("请输入手机").removeClass().addClass("errormsg");
}else{
}
returnfalse;
}

if(accountIsOK&&passwdIsOK&&confirmpwdIsOK&&phoneIsOK){
alert("欢迎注册");
returntrue;
}else{
alert("请检查信息");
returnfalse;
}
}




会员注册









帐   号：



设置密码：



确认密码：



手   机：

以上这篇(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

帐号：
设置密码：
确认密码：
手机：

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

会员注册

热门推荐

随机推荐