当前位置： 移动技术网 > IT编程>开发语言>Java > java网上图书商城（1）User模块

java网上图书商城（1）User模块

2019年07月22日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了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. 获取<img>元素
 * 2. 重新设置它的src
 * 3. 使用毫秒来添加参数
 */
 $("#imgverifycode").attr("src", "/goods/verifycodeservlet?a=" + new date().gettime());
}

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网