本文实例为大家分享了java网上图书商城user模块代码，供大家参考，具体内容如下

效果图：

regist.js

$(function() {

/*

* 1. 得到所有的错误信息，循环遍历之。调用一个方法来确定是否显示错误信息！

*/

$(".errorClass").each(function() {

showError($(this));//遍历每个元素，使用每个元素来调用showError方法

});

/*

* 2. 切换注册按钮的图片

*/

$("#submitBtn").hover(

function() {

$("#submitBtn").attr("src", "/goods/images/regist2.jpg");

},

function() {

$("#submitBtn").attr("src", "/goods/images/regist1.jpg");

}

);

/*

* 3. 输入框得到焦点隐藏错误信息

*/

$(".inputClass").focus(function() {

var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的label的id

$("#" + labelId).text("");//把label的内容清空！

showError($("#" + labelId));//隐藏没有信息的label

});

/*

* 4. 输入框失去焦点进行校验

*/

$(".inputClass").blur(function() {

var id = $(this).attr("id");//获取当前输入框的id

var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到对应的校验函数名

eval(funName);//执行函数调用

});

/*

* 5. 表单提交时进行校验

*/

$("#registForm").submit(function() {

var bool = true;//表示校验通过

if(!validateLoginname()) {

bool = false;

}

if(!validateLoginpass()) {

bool = false;

}

if(!validateReloginpass()) {

bool = false;

}

if(!validateEmail()) {

bool = false;

}

if(!validateVerifyCode()) {

bool = false;

}

return bool;

});

});

/*

* 登录名校验方法

*/

function validateLoginname() {

var id = "loginname";

var value = $("#" + id).val();//获取输入框内容

/*

* 1. 非空校验

*/

if(!value) {

/*

* 获取对应的label

* 添加错误信息

* 显示label

*/

$("#" + id + "Error").text("用户名不能为空！");

showError($("#" + id + "Error"));

return false;

}

/*

* 2. 长度校验

*/

if(value.length < 3 || value.length > 20) {

/*

* 获取对应的label

* 添加错误信息

* 显示label

*/

$("#" + id + "Error").text("用户名长度必须在3 ~ 20之间！");

showError($("#" + id + "Error"));

false;

}

/*

* 3. 是否注册校验

*/

$.ajax({

url:"/goods/UserServlet",//要请求的servlet

data:{method:"ajaxValidateLoginname", loginname:value},//给服务器的参数

type:"POST",

dataType:"json",

async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。

cache:false,

success:function(result) {

if(!result) {//如果校验失败

$("#" + id + "Error").text("用户名已被注册！");

showError($("#" + id + "Error"));

return false;

}

}

});

return true;

}

/*

* 登录密码校验方法

*/

function validateLoginpass() {

var id = "loginpass";

var value = $("#" + id).val();//获取输入框内容

/*

* 1. 非空校验

*/

if(!value) {

/*

* 获取对应的label

* 添加错误信息

* 显示label

*/

$("#" + id + "Error").text("密码不能为空！");

showError($("#" + id + "Error"));

return false;

}

/*

* 2. 长度校验

*/

if(value.length < 3 || value.length > 20) {

/*

* 获取对应的label

* 添加错误信息

* 显示label

*/

$("#" + id + "Error").text("密码长度必须在3 ~ 20之间！");

showError($("#" + id + "Error"));

false;

}

return true;

}

/*

* 确认密码校验方法

*/

function validateReloginpass() {

var id = "reloginpass";

var value = $("#" + id).val();//获取输入框内容

/*

* 1. 非空校验

*/

if(!value) {

/*

* 获取对应的label

* 添加错误信息

* 显示label

*/

$("#" + id + "Error").text("确认密码不能为空！");

showError($("#" + id + "Error"));

return false;

}

/*

* 2. 两次输入是否一致校验

*/

if(value != $("#loginpass").val()) {

/*

* 获取对应的label

* 添加错误信息

* 显示label

*/

$("#" + id + "Error").text("两次输入不一致！");

showError($("#" + id + "Error"));

false;

}

return true;

}

/*

* Email校验方法

*/

function validateEmail() {

var id = "email";

var value = $("#" + id).val();//获取输入框内容

/*

* 1. 非空校验

*/

if(!value) {

/*

* 获取对应的label

* 添加错误信息

* 显示label

*/

$("#" + id + "Error").text("Email不能为空！");

showError($("#" + id + "Error"));

return false;

}

/*

* 2. Email格式校验

*/

if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {

/*

* 获取对应的label

* 添加错误信息

* 显示label

*/

$("#" + id + "Error").text("错误的Email格式！");

showError($("#" + id + "Error"));

false;

}

/*

* 3. 是否注册校验

*/

$.ajax({

url:"/goods/UserServlet",//要请求的servlet

data:{method:"ajaxValidateEmail", email:value},//给服务器的参数

type:"POST",

dataType:"json",

async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。

cache:false,

success:function(result) {

if(!result) {//如果校验失败

$("#" + id + "Error").text("Email已被注册！");

showError($("#" + id + "Error"));

return false;

}

}

});

return true;

}

/*

* 验证码校验方法

*/

function validateVerifyCode() {

var id = "verifyCode";

var value = $("#" + id).val();//获取输入框内容

/*

* 1. 非空校验

*/

if(!value) {

/*

* 获取对应的label

* 添加错误信息

* 显示label

*/

$("#" + id + "Error").text("验证码不能为空！");

showError($("#" + id + "Error"));

return false;

}

/*

* 2. 长度校验

*/

if(value.length != 4) {

/*

* 获取对应的label

* 添加错误信息

* 显示label

*/

$("#" + id + "Error").text("错误的验证码！");

showError($("#" + id + "Error"));

false;

}

/*

* 3. 是否正确

*/

$.ajax({

url:"/goods/UserServlet",//要请求的servlet

data:{method:"ajaxValidateVerifyCode", verifyCode:value},//给服务器的参数

type:"POST",

dataType:"json",

async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。

cache:false,

success:function(result) {

if(!result) {//如果校验失败

$("#" + id + "Error").text("验证码错误！");

showError($("#" + id + "Error"));

return false;

}

}

});

return true;

}

/*

* 判断当前元素是否存在内容，如果存在显示，不页面不显示！

*/

function showError(ele) {

var text = ele.text();//获取元素的内容

if(!text) {//如果没有内容

ele.css("display", "none");//隐藏元素

} else {//如果有内容

ele.css("display", "");//显示元素

}

}

/*

* 换一张验证码

*/

function _hyz() {

/*

* 1. 获取元素

* 2. 重新设置它的src

* 3. 使用毫秒来添加参数

*/

$("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime());

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。