1. 注册

 $(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());
 }

regist.js

网上图书商城1--User模块的更多相关文章

  1. 基于SSH的网上图书商城-JavaWeb项目-有源码

    开发工具:Myeclipse/Eclipse + MySQL + Tomcat 项目简介: 技术:Java:JSP:JDBC,struts2,spring,hibernate数据库: mysqlweb ...

  2. JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验

    1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...

  3. JavaWeb网上图书商城完整项目--24.注册页面的css样式实现

    现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...

  4. 网上图书商城项目学习笔记-011Book模块查询(分页)

    一.流程分析 1.图书模块 2.分布分析 二.代码 1.view层 1)list.jsp <%@ page language="java" import="java ...

  5. JavaWeb网上图书商城完整项目--day03-1.图书模块功能介绍及相关类创建

    1 前两天我们学习了user用户模块和图书的分类模块,接下来我们学习图书模块 图书模块的功能主要是下面的功能: 2 接下来我们创建对应的包 我们来看看对应的数据库表t_book CREATE TABL ...

  6. 网上图书商城项目学习笔记-012BOOK模块查询2

    一.分析 > 按图名查询(模糊)(分页)> 按作者查询(分页)> 按出版社查询(分页)> 按id查询> 多条件组合查询(分页) 二.代码 1.view层 (1)gj.js ...

  7. JavaWeb网上图书商城完整项目--21.用户模块各层相关类的创建

    1.现在要为user用户模块创建类 用户模块功能包括:注册.激活.登录.退出.修改密码. User类对照着t_user表来写即可.我们要保证User类的属性名称与t_user表的列名称完全相同. 我们 ...

  8. JavaWeb网上图书商城完整项目--day02-24.分类模块的相关类创建

    所谓的分类模块:就是显示所有的分类的功能,显示所有的分类在left.jsp页面中 这就是显示所有的分类: 要实现上面的,我们首先创建一个分类模块,该模块需要实现下面的功能 我们先创建上面的java包 ...

  9. 网上图书商城3--Book模块

    小技巧一:分页 ①PageBean<Book> findByCriteria(List<Expression> exprList, int pc)  --- 通用的查询方法(p ...

  10. 网上图书商城2--Category模块

    sql CREATE TABLE `t_category` ( `cid` char(32) NOT NULL, `cname` varchar(50) DEFAULT NULL, `pid` cha ...

随机推荐

  1. 使用node+vue.js实现SPA应用,nodevue.jsspa应用

    使用node+vue.js实现SPA应用,nodevue.jsspa应用 http://www.bkjia.com/Javascript/1097617.html https://github.com ...

  2. win2003 64位系统IIS6.0 32位与64位间切换

    ASP.NET 1.1,32 位版本 要运行 32 位版本的 ASP.NET 1.1,按照以下步骤操作: 1.单击“开始”,单击“运行”,键入 cmd,然后单击“确定”. 2.键入以下命令启用 32 ...

  3. 【译】怎样编写移动优先的CSS

    原文:How To Write Mobile-first CSS 作者: 译者:huansky 构建响应式网站是今天前端开发人员必备的技能. 当我们谈论响应式网站时,移动优先这个词立刻就会浮现. 我们 ...

  4. 分享系列--面试JAVA架构师--链家网

    本月7日去了一趟链家网面试,虽然没有面上,但仍有不少收获,在此做个简单的分享,当然了主要是分享给自己,让大家见笑了.因为这次是第一次面试JAVA网站架构师相关的职位,还是有些心虚的,毕竟之前大部分时间 ...

  5. javascript技术大全

    这更像是一篇为自己而写的文章,没有过多的解释,sorray. 关于:return function fn(num){ var a = num; if(a>1){ a = num + 1; ret ...

  6. Android属性动画之ObjectAnimator

    相信对于Android初学者,对于Android中的动画效果一定很感兴趣,今天为大家总结一下刚刚学到的属性动画案例. 首先和一般的Android应用一样,我们先建一个工程,为了方便,我们的布局文件中就 ...

  7. 【原创】Matlab.NET混合编程技巧之找出Matlab内置函数

                  本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新    Matlab和C#混合编程文章目录 :[目录]Matlab和C#混合编程文章目录 Matlab与.N ...

  8. Linux的学习--crontab

    之前了解过一点crontab,前段时间比较闲,就熟悉了一下,今天总结记录一下. crontab命令常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并 ...

  9. 在<a></a>标签中调用javascript脚本

    有时候,我们点击了<a></a>标签(除了跳转到指定链接外)想要它调用某个方法,及调用javascript脚本,该如何做: 方法1:<a href="javas ...

  10. HTML5第一讲

    第一回合:什么是HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTM ...