JavaWeb网上图书商城完整项目--day02-3.regist页面输入框失去焦点进行校验
当输入框输入数据之后，当输入框失去焦点的时候，我们需要对输入的数据进行校验
l 用户名校验：
- 用户名不能为空；
- 用户名长度必须在3 ~ 20之间；
- 用户名已被注册（需要异步访问服务器）。
l 登录密码校验：
- 密码不能为空；
- 密码长度必须在3 ~ 10之间；
l 确认密码校验：
- 确认密码不能为空；
- 两次输入不一致；
l Email校验：
- Email不能为空；
- Email格式错误（/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/）；
- Email已被注册（需要异步访问服务器）；
l 验证码校验：
- 验证码不能为空；
- 验证码错误（需要异步访问服务器）；
我们来看程序的代码：
//该函数在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;
default:
break;
}
}); }); // 对输入的用户名进行合法性校验
function validateloginname(){
//获得输入框中的内容
var content = $("#loginname").val();
// 非空校验
if(!content){
//内容为空，将后面的label显示出来
$("#loginnameError").text("用户名不能为空！");
//显示标签
showError($("#loginnameError"));
return false ;//不再执行后面的语句
}
//长度校验
if(content.length <3 || content.length>20){
//内容为空，将后面的label显示出来
$("#loginnameError").text("用户名的长度必须在3-20之间！");
//显示标签
showError($("#loginnameError"));
return false ;//不再执行后面的语句
}
//是否已经注册的校验
return true;
} //对输入的密码进行校验
function validateloginpass(){ } //对输入的确认密码进行校验
function validatereloginrepass(){ } // 对输入的邮箱地址进行校验
function validateemail(){ } //判断当前元素是否存在内容，存在显示，不存在不显示
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());
}
我们来看看运行的效果：
是否注册的校验我们放在后面实现因为需要用到ajax异步请求服务器
接下来我们实现validateloginpass的校验
//该函数在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;
default:
break;
}
}); }); // 对输入的用户名进行合法性校验
function validateloginname(){
//获得输入框中的内容
var content = $("#loginname").val();
// 非空校验
if(!content){
//内容为空，将后面的label显示出来
$("#loginnameError").text("用户名不能为空！");
//显示标签
showError($("#loginnameError"));
return false ;//不再执行后面的语句
}
//长度校验
if(content.length <3 || content.length>20){
//内容为空，将后面的label显示出来
$("#loginnameError").text("用户名的长度必须在3-20之间！");
//显示标签
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(){ } // 对输入的邮箱地址进行校验
function validateemail(){ } //判断当前元素是否存在内容，存在显示，不存在不显示
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());
}
接下来我们来实现validatereloginrepass的校验
//该函数在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;
default:
break;
}
}); }); // 对输入的用户名进行合法性校验
function validateloginname(){
//获得输入框中的内容
var content = $("#loginname").val();
// 非空校验
if(!content){
//内容为空，将后面的label显示出来
$("#loginnameError").text("用户名不能为空！");
//显示标签
showError($("#loginnameError"));
return false ;//不再执行后面的语句
}
//长度校验
if(content.length <3 || content.length>20){
//内容为空，将后面的label显示出来
$("#loginnameError").text("用户名的长度必须在3-20之间！");
//显示标签
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(){ } //判断当前元素是否存在内容，存在显示，不存在不显示
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());
}
接下来我们验证邮箱地址是否有效validateemail
// 对输入的邮箱地址进行校验
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 ;//不再执行后面的语句
}
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 ;//不再执行后面的语句
}
return true;
}
我们来看整个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;
}
}); }); // 对输入的用户名进行合法性校验
function validateloginname(){
//获得输入框中的内容
var content = $("#loginname").val();
// 非空校验
if(!content){
//内容为空，将后面的label显示出来
$("#loginnameError").text("用户名不能为空！");
//显示标签
showError($("#loginnameError"));
return false ;//不再执行后面的语句
}
//长度校验
if(content.length <3 || content.length>20){
//内容为空，将后面的label显示出来
$("#loginnameError").text("用户名的长度必须在3-20之间！");
//显示标签
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 ;//不再执行后面的语句
}
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 ;//不再执行后面的语句
}
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-3.regist页面输入框失去焦点进行校验的更多相关文章
- JavaWeb网上图书商城完整项目--day02-17.登录功能页面实现
1.当在登陆页面点击登陆按钮的时候,会调用UserServlet的login方法,我们要在login.jsp中进行配置 2.要在login.jsp中处理Servlet在后台业务操作之后forward到 ...
- JavaWeb网上图书商城完整项目--day02-18.修改密码页面处理
1.用户登陆成功之后会显示 当点击修改密码的时候,会进入下面的页面 对应的是pwd.jsp这个文件 我们把对jsp页面前段的校验都封装在pwd.js中,在jsp中引入该js文件 <%@ page ...
- 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网上图书商城完整项目--过滤器解决中文乱码
我们知道,如果是POST请求,我们需要调用request.setCharacterEncoding(“utf-8”)方法来设计编码:如果是GET请求,我们需要自己手动来处理编码问题.如果我们使用了En ...
- JavaWeb网上图书商城完整项目--13.项目所需环境的搭建
1.首先安装mysql 创建项目所需的数据库,直接运行项目提供的goods.sql文库 2.myeclipse创建一个web project ,项目的名称是goods 把视频中提供的项目原型下的提供的 ...
- JavaWeb网上图书商城完整项目--BaseServlet
1.以前进行操作的时候,例如我们进行登陆操作我们使用LoginServlet进行处理,进行注册操作我们使用RegisterServlet,很多业务的操作的时候我们就要定义很多个Servlet 有了Ba ...
- JavaWeb网上图书商城完整项目--day02-21.退出功能的实现
1.当用户点击退出的时候,跳转到登陆页面 当用户点击退出的时候,需要将session中保存的登陆的用户销毁掉 当用户点击退出的时候,调用UserServlet的quit方法 退出按钮在top.jsp中 ...
- JavaWeb网上图书商城完整项目--day03-1.图书模块功能介绍及相关类创建
1 前两天我们学习了user用户模块和图书的分类模块,接下来我们学习图书模块 图书模块的功能主要是下面的功能: 2 接下来我们创建对应的包 我们来看看对应的数据库表t_book CREATE TABL ...
- JavaWeb网上图书商城完整项目--day02-28.查询所有分类功能之left页面使用Q6MenuBar组件显示手风琴式下拉菜单
首先页面去加载的时候,会去加载main.js文件,我们在加载left.jsp.top.jsp body.jsp,现在我们修改main.jsp的代码,让它去请求的时候去访问的是不在直接去访问left.j ...
随机推荐
- 郭盛华：DNS新漏洞可使黑客可以发起大规模DDoS攻击
近日,知名网络黑客安全专家.东方联盟创始人郭盛华微博披露了有关影响DNS协议的新缺陷的详细信息,该缺陷可被利用来发起放大的大规模分布式拒绝服务(DDoS)攻击,以击倒目标网站.该漏洞称为NXNSAtt ...
- 泛微 e-cology远程代码执行漏洞
影响版本:泛微 e-cology<=9.0 漏洞分析: 问题出现在 resin 下 lib 中的 bsh.jar 文件里,问题类 bsh.servlet.BshServlet,可 doGet 方 ...
- Java实现 LeetCode 740 删除与获得点数（递推 || 动态规划？打家劫舍Ⅳ）
740. 删除与获得点数 给定一个整数数组 nums ,你可以对它进行一些操作. 每次操作中,选择任意一个 nums[i] ,删除它并获得 nums[i] 的点数.之后,你必须删除每个等于 nums[ ...
- Java实现 LeetCode 328 奇偶链表
328. 奇偶链表 给定一个单链表,把所有的奇数节点和偶数节点分别排在一起.请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是节点的值的奇偶性. 请尝试使用原地算法完成.你的算法的空间复杂 ...
- Java实现 LeetCode 140 单词拆分 II（二）
140. 单词拆分 II 给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,在字符串中增加空格来构建一个句子,使得句子中所有的单词都在词典中.返回所有这些可能的句子. 说明: 分 ...
- 【CSS】电脑、移动端公用样式
电脑端: /* Public */ @charset "utf-8"; html, body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3 ...
- 一篇文章快速入门React框架
视频教程 本文章在B站配有视频教程 课程目标 了解最常用的React概念和相关术语,例如JSX,组件,属性(Props),状态(state). 构建一个非常简单的React应用程序,以阐述上述概念. ...
- 6.keras-基于CNN网络的Mnist数据集分类
keras-基于CNN网络的Mnist数据集分类 1.数据的载入和预处理 import numpy as np from keras.datasets import mnist from keras. ...
- rgb格式颜色与#000000格式颜色的转换
首先,#000000格式的颜色被成为十六进制颜色码: 6位数分为三组,每两位数一组,依次是红.黄.蓝颜色的强度: 而与此对应的,rgb(39,137,202)依次是十进制的红黄蓝颜色: 因此将rgb格 ...
- 基于使用ISCSI存储的ibmmq通过heartbeat实现HA方案以及碰到的问题总结
一.背景 ibmmq是一种传统架构的mq产品,运行稳定,有其自身优点,但在高可用(HA)这一块需要使用公司根据自身需求选用高可用(HA)产品,但由于市面HA商业产品较贵,所以使用linux操作系统级的 ...