京东注册页⾯简单html代码,（模仿京东⽤户注册）⽤JQuery 实现简单表单验证，初学者必看...
说明：
1. 代码中的js脚本⽂件路径需替换为⾃⼰的⽬录⽂件
2. 代码中加⼊了ajax验证账号是否存在
pageEncoding="UTF-8"%>
表单验证
font {
font-size: 10px;
}
.info {
color: #AAAAAA;
}
.errormsg {
color: #FF3030;
}
.errorinput {
border-color: #FF3030;
border-width: 1px;
}
.ok {
color: #32CD32;
}
/
/账号是否验证过
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);jquery怎么进行验证
}
} 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 (!st(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 {
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。