JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现
1 、现在我们要在regist.js中实现ajax的功能,使用用户名到后台查询是否注册,邮箱是否到后台注册,验证码是否正确的功能
我们来看regist.js的代码
//该函数在html文档加载完成之后会调用
$(function() {
/*
* 变量所有的错误信息,调用一个方法来决定是否显示错误信息
* */
$(".errorClass").each(function() {
showError($(this));//$(this)表示当前遍历的对象
}); //切换注册按钮的图片
$("#submitBtn").hover(function () {
//获得光标焦点
$("#submitBtn").attr("src","/goods/images/regist2.jpg");
},function(){
//失去光标的焦点
$("#submitBtn").attr("src","/goods/images/regist1.jpg"); }); //当输入框获得焦点的时候,隐藏label标签的内容
$(".inputClass").focus(function() {
//首先获得label标签的id
var inputId = $(this).attr("id");
var labelId = inputId+"Error";//label的id
//清楚该标签的内容
$("#"+labelId).text("");
//让该标签不显示
showError($("#"+labelId));
});
//当输入框失去焦点的时候,我们需要对输入的数据进行有效的校验,比如输入的电话号码是否合法,邮箱是否合法
$(".inputClass").blur(function() {
//首先判断当前是那个input输入框被调用了
var inputId = $(this).attr("id");
//;
//调用对应的校验方法
var functionName = "validate"+inputId;//获得需要调用的验证函数,如果是id为loginname,就调用validateloginname()函数进行验证
switch(functionName){
case "validateloginname":
validateloginname();
break;
case "validateloginpass":
validateloginpass();
break;
case "validatereloginrepass":
validatereloginrepass();
break;
case "validateemail":
validateemail();
break;
case "validateverifyCode":
validateverifyCode();
break;
default:
break;
}
}); //对表单的提交进行校验
$("#registForm").submit(function() {
if(! validateloginname()){
return false;
}
if(! validateloginpass()){
return false;
}
if(! validatereloginrepass()){
return false;
}
if(! validateemail()){
return false;
}
if(! validateverifyCode()){
return false;
} return true;
}); }); // 对输入的用户名进行合法性校验
function validateloginname(){
//获得输入框中的内容
var content = $("#loginname").val();
// 非空校验
if(!content){
//内容为空,将后面的label显示出来
$("#loginnameError").text("用户名不能为空!");
//显示标签
showError($("#loginnameError"));
return false ;//不再执行后面的语句
}
//长度校验
if(content.length <2 || content.length>20){
//内容为空,将后面的label显示出来
$("#loginnameError").text("用户名的长度必须在2-20之间!");
//显示标签
showError($("#loginnameError"));
return false ;//不再执行后面的语句
}
//是否已经注册的校验
//使用ajax到后台服务器去验证
$.ajax({
// 等于http:///goods/UserServlet?method=validateLoginname&loginname=content
url:"/goods/UserServlet",
data:{method:"validateLoginname",loginname:content},//其中method指的是要访问UserServlet中的那个方法;
type:"POST",
dataType:"json",
async:false, //这里选择同步,如果选择异步操作还没有到服务器查询完结果,就直接返回结果了true了
cache:false,
success:function(result){
if(result){
//内容为空,将后面的label显示出来
$("#loginnameError").text("用户名已经注册");
//显示标签
showError($("#loginnameError"));
return false ;//不再执行后面的语句
}
} }); return true;
} //对输入的密码进行校验
function validateloginpass(){
//获得输入框中的内容
var content = $("#loginpass").val();
// 非空校验
if(!content){
//内容为空,将后面的label显示出来
$("#loginpassError").text("密码不能为空!");
//显示标签
showError($("#loginpassError"));
return false ;//不再执行后面的语句
}
//长度校验
if(content.length <3 || content.length>20){
//内容为空,将后面的label显示出来
$("#loginpassError").text("密码的长度必须在3-20之间!");
//显示标签
showError($("#loginpassError"));
return false ;//不再执行后面的语句
}
return true;
} //对输入的确认密码进行校验
function validatereloginrepass(){
//获得输入框中的内容
var content = $("#reloginrepass").val();
// 非空校验
if(!content){
//内容为空,将后面的label显示出来
$("#reloginrepassError").text("密码不能为空!");
//显示标签
showError($("#reloginrepassError"));
return false ;//不再执行后面的语句
}
//判断两次输入的内容是否一致
if(content != $("#loginpass").val()){
//内容为空,将后面的label显示出来
$("#reloginrepassError").text("两次输入的密码不一致!");
//显示标签
showError($("#reloginrepassError"));
return false ;//不再执行后面的语句
}
return true; } // 对输入的邮箱地址进行校验
function validateemail(){
//获得输入框中的内容
var content = $("#email").val();
// 非空校验
if(!content){
//内容为空,将后面的label显示出来
$("#emailError").text("邮箱不能为空!");
//显示标签
showError($("#emailError"));
return false ;//不再执行后面的语句
}
//判断输入的邮箱格式是否正确
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(content)){
//内容为空,将后面的label显示出来
$("#emailError").text("邮箱格式不正确!");
//显示标签
showError($("#emailError"));
return false ;//不再执行后面的语句
} //到后台服务器检查是否邮箱已经注册了
//使用ajax到后台服务器去验证
$.ajax({
url:"/goods/UserServlet",
data:{method:"validateEmail",email:content},//其中method指的是要访问UserServlet中的那个方法;
type:"POST",
dataType:"json",
async:false, //这里选择同步,如果选择异步操作还没有到服务器查询完结果,就直接返回结果了true了
cache:false,
success:function(result){
if(result){
//内容为空,将后面的label显示出来
$("#emailError").text("该邮箱已经被注册");
//显示标签
showError($("#emailError"));
return false ;//不再执行后面的语句
}
} }); return true;
} //对输入的地址进行校验
function validateverifyCode(){
//获得输入框中的内容
var content = $("#verifyCode").val();
// 非空校验
if(!content){
//内容为空,将后面的label显示出来
$("#verifyCodeError").text("验证码不能为空!");
//显示标签
showError($("#verifyCodeError"));
return false ;//不再执行后面的语句
}
//验证码的长度必须是4
if(content.length != 4){
//内容为空,将后面的label显示出来
$("#verifyCodeError").text("验证码不正确!");
//显示标签
showError($("#verifyCodeError"));
return false ;//不再执行后面的语句
} // 到后台验证验证码是否正确
//使用ajax到后台服务器去验证
$.ajax({
url:"/goods/UserServlet",
data:{method:"validateVerifyCode",verifyCode:content},//其中method指的是要访问UserServlet中的那个方法;
type:"POST",
dataType:"json",
async:false, //这里选择同步,如果选择异步操作还没有到服务器查询完结果,就直接返回结果了true了
cache:false,
success:function(result){
if(!result){
//内容为空,将后面的label显示出来
$("#verifyCodeError").text("验证码不正确!");
//显示标签
showError($("#verifyCodeError"));
return false ;//不再执行后面的语句
}
} });
return true;
} //判断当前元素是否存在内容,存在显示,不存在不显示
function showError( ele ){
var text = ele.text();//获得该对象的文本值
if(!text){
ele.css("display","none");//让该对象消息
}else{
ele.css("display","");//显示对象
} } //实现验证码图片的切换功能
function changeVerifyCode() {
$("#imgVerifyCode").attr("src","/goods/VerifyCodeServlet?a="+new Date().getTime());
}
JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现的更多相关文章
- JavaWeb网上图书商城完整项目--day02-28.查询所有分类功能之left页面使用Q6MenuBar组件显示手风琴式下拉菜单
首先页面去加载的时候,会去加载main.js文件,我们在加载left.jsp.top.jsp body.jsp,现在我们修改main.jsp的代码,让它去请求的时候去访问的是不在直接去访问left.j ...
- JavaWeb网上图书商城完整项目--day02-10.提交注册表单功能之页面实现
1.当从服务器返回的注册错误信息的时候,我们在注册界面需要将错误信息显示出来 我们需要修改regist.jsp页面的代码:其中error是一个haspmap,c标签对map的属性可以直接使用 ${er ...
- JavaWeb网上图书商城完整项目--day02-25.查询所有分类功能之流程分析
分类模块的业务流程入下面所示:
- JavaWeb网上图书商城完整项目--day02-27.查询所有分类功能之Servlet和Service层
我们在上面实现了数据库层的代码,现在我们来实现业务层和Servlet层的代码:业务层的代码如下: package com.weiyuan.goods.category.service; import ...
- JavaWeb网上图书商城完整项目--day02-26.查询所有分类功能之DAO层实现
我们按照表示的设计 以及: package com.weiyuan.goods.category.domain; import java.util.List; public class Categor ...
- JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...
- JavaWeb网上图书商城完整项目--24.注册页面的css样式实现
现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...
- JavaWeb网上图书商城完整项目--day02-21.退出功能的实现
1.当用户点击退出的时候,跳转到登陆页面 当用户点击退出的时候,需要将session中保存的登陆的用户销毁掉 当用户点击退出的时候,调用UserServlet的quit方法 退出按钮在top.jsp中 ...
- JavaWeb网上图书商城完整项目--过滤器解决中文乱码
我们知道,如果是POST请求,我们需要调用request.setCharacterEncoding(“utf-8”)方法来设计编码:如果是GET请求,我们需要自己手动来处理编码问题.如果我们使用了En ...
- JavaWeb网上图书商城完整项目--13.项目所需环境的搭建
1.首先安装mysql 创建项目所需的数据库,直接运行项目提供的goods.sql文库 2.myeclipse创建一个web project ,项目的名称是goods 把视频中提供的项目原型下的提供的 ...
随机推荐
- 安卓全屏或沉浸式状态栏下输入框(EditText)被键盘遮挡解决方法
沉浸式状态栏用了一段时间了,一直没发现安卓在这方面的坑.最近在集成环信自定义UI的过程中,发现将环信界面设置为沉浸式之后最底部的消息输入框不随键盘弹起而变化了,一直显示在屏幕最下方,体验非常差. 后来 ...
- 03.Django-ORM
ORM 1. 数据库配置 配置使用sqlite3,mysql,oracle,postgresql等数据库 sqlite3数据库配置 DATABASES = { 'default': { # 默认使用的 ...
- 一篇文章,全面掌握Git
版本控制 版本控制就是记录项目文件的历史变化.它为我们查阅日志,回退,协作等方面提供了有力的帮助. 版本控制一般分为集中化版本控制和分布式版本控制. 集中化主要的版本数据都保存服务端. 分布式版本数据 ...
- 容器技术之Dockerfile (一)
在前边的随笔中我们聊到了docker的基本命令,镜像,网络,存储卷以及基于现有容器制做docker镜像,相关随笔可参考https://www.cnblogs.com/qiuhom-1874/categ ...
- 概念辨析-Description Language还是Description Library?
https://mp.weixin.qq.com/s/p7eyD6GkniFGHrnr8t2SZQ 概念辨析-Description Language还是Description Library? ...
- Spring ( 五 )Spring之数据访问与事务管理
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.Spring之数据访问 1.Spring数据访问工程环境搭建 jdbc.properties配置 ...
- link和@import引入css的区别
@import是在CSS2.1提出的,低版本的浏览器不支持.link支持良好: link引用CSS时,在页面载入时同时加载: @import需要页面网页完全载入以后加载.如果页面内容过多,会产生不好的 ...
- Java 第十一届 蓝桥杯 省模拟赛 合法括号序列
合法括号序列 题目 问题描述 由1对括号,可以组成一种合法括号序列:(). 由2对括号,可以组成两种合法括号序列:()().(()). 由4对括号组成的合法括号序列一共有多少种? 答案提交 这是一道结 ...
- Java实现 LeetCode 457 环形数组循环
457. 环形数组循环 给定一个含有正整数和负整数的环形数组 nums. 如果某个索引中的数 k 为正数,则向前移动 k 个索引.相反,如果是负数 (-k),则向后移动 k 个索引.因为数组是环形的, ...
- Java实现 洛谷 P2089 烤鸡
import java.util.Arrays; import java.util.Iterator; import java.util.LinkedList; import java.util.Sc ...