完整注册+JQuery验证+selert后台校验
Java代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册页面</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>"> <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>
</head> <body>
<div id="divMain">
<div id="divTitle">
<span id="spanTitle">新用户注册</span>
</div>
<div id="divBody">
<form action="<c:url value='/UserServlet'/>" method="post" id="registForm">
<input type="hidden" name="method" value="regist"/>
<table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput">
<input class="inputClass" type="text" name="loginname" id="loginname" value="${form.loginname }"/>
</td>
<td class="tdError">
<label class="errorClass" id="loginnameError">${errors.loginname }</label>
</td>
</tr>
<tr>
<td class="tdText">登录密码：</td>
<td>
<input class="inputClass" type="password" name="loginpass" id="loginpass" value="${form.loginpass }"/>
</td>
<td>
<label class="errorClass" id="loginpassError">${errors.loginpass }</label>
</td>
</tr>
<tr>
<td class="tdText">确认密码：</td>
<td>
<input class="inputClass" type="password" name="reloginpass" id="reloginpass" value="${form.reloginpass }"/>
</td>
<td>
<label class="errorClass" id="reloginpassError">${errors.reloginpass}</label>
</td>
</tr>
<tr>
<td class="tdText">Email：</td>
<td>
<input class="inputClass" type="text" name="email" id="email" value="${form.email }"/>
</td>
<td>
<label class="errorClass" id="emailError">${errors.email}</label>
</td>
</tr>
<tr>
<td class="tdText">验证码：</td>
<td>
<input class="inputClass" type="text" name="verifyCode" id="verifyCode" value="${form.verifyCode }"/>
</td>
<td>
<label class="errorClass" id="verifyCodeError">${errors.verifyCode}</label>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"/></div>
</td>
<td>
<label><a href="javascript:_hyz()">换一张</a></label>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/>
</td>
<td>
<label></label>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html> 2 注册页面regist的css： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册页面</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>"> <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>
</head> <body>
<div id="divMain">
<div id="divTitle">
<span id="spanTitle">新用户注册</span>
</div>
<div id="divBody">
<form action="<c:url value='/UserServlet'/>" method="post" id="registForm">
<input type="hidden" name="method" value="regist"/>
<table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput">
<input class="inputClass" type="text" name="loginname" id="loginname" value="${form.loginname }"/>
</td>
<td class="tdError">
<label class="errorClass" id="loginnameError">${errors.loginname }</label>
</td>
</tr>
<tr>
<td class="tdText">登录密码：</td>
<td>
<input class="inputClass" type="password" name="loginpass" id="loginpass" value="${form.loginpass }"/>
</td>
<td>
<label class="errorClass" id="loginpassError">${errors.loginpass }</label>
</td>
</tr>
<tr>
<td class="tdText">确认密码：</td>
<td>
<input class="inputClass" type="password" name="reloginpass" id="reloginpass" value="${form.reloginpass }"/>
</td>
<td>
<label class="errorClass" id="reloginpassError">${errors.reloginpass}</label>
</td>
</tr>
<tr>
<td class="tdText">Email：</td>
<td>
<input class="inputClass" type="text" name="email" id="email" value="${form.email }"/>
</td>
<td>
<label class="errorClass" id="emailError">${errors.email}</label>
</td>
</tr>
<tr>
<td class="tdText">验证码：</td>
<td>
<input class="inputClass" type="text" name="verifyCode" id="verifyCode" value="${form.verifyCode }"/>
</td>
<td>
<label class="errorClass" id="verifyCodeError">${errors.verifyCode}</label>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"/></div>
</td>
<td>
<label><a href="javascript:_hyz()">换一张</a></label>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/>
</td>
<td>
<label></label>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
3 注册页面regist中的JS
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());
}
效果图如下：
完整注册+JQuery验证+selert后台校验的更多相关文章
- ssh整合问题总结--使用struts2+Ajax+jquery验证用户名是否已被注册
在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面 ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
- Jquery Easyui验证扩展，Easyui验证，Easyui校验，js正则表达式
Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式 >>>>>>>>>>>>>> ...
- jquery 验证控件
最近应公司要求做了一个jquery的示例文件,包括:模态窗口怎么实现:jquery validate下的校验:怎么做图片特效:怎么实现异步操作:实现图片上传剪切效果等很多特效: 这里把jquery校验 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- jQuery.validate表单校验+bootstrap
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- 巨蟒django之CRM1 需求分析&&表结构设计&&注册登录验证
1.需求分析 .项目 ()业务 ()权限的管理 .CRM customer relationship management 客户关系管理系统 .谁来使用CRM? 销售&&班主任& ...
- jquery验证前端页面
一共三个页面 jquery.html文件(前端页面,jquery验证用户信息) jquerytest.php文件(后台处理页面) jquerydb.php文件(数据库) 数据表结构 jquery.ht ...
随机推荐
- python课程设计笔记（二）破冰基本语法
python两种编程方式:交互式与文件式 交互式:语法练习,输一条运行一条 文件式:通用,执行一组语句 注释 #单行注释 ...XXXXX...多行注释 逻辑 没有大括号,按缩进确定逻辑——缩进格数 ...
- vue2.x阅读笔记
v-once 作用: 只赋值一次 注意: 包括子项都是只赋值一次 模板 1.v-text v-html 2.{}语法 3.如果是html的属性,则用v-bind绑定,简写: 注意: 1.可以使用jav ...
- 一个不错的学习android的网站
http://androiddoc.qiniudn.com/guide/topics/ui/overview.html,最近想学下android的开发,找了一下网上的资料,中文的说的觉得太概括,看不太 ...
- 微信二次认证 C#
using Senparc.Weixin.Entities; using Senparc.Weixin.HttpUtility; using Senparc.Weixin.QY.AdvancedAPI ...
- centos7常见的操作01 UTC CST
CentOS系统将UTC时间修改为CST时间方法 2018-10-31 07:51 世界协调时间(Universal Time Coordinated,UTC): GPS 系统中有两种时间区分,一 ...
- prevent阻止标签默认行为&stop阻止事件冒泡
<form id="vm" v-on:submit.prevent="register"> 1.prevent是preventDefault,阻止标 ...
- buddyinfo 内存碎片数据采集
不说了,上工具 #cat buddyinfo.sh #!/bin/sh #*************************************************************** ...
- Django之组合查询
一 .Django组合查询 很多电商网站中有组合搜索的功能,所谓组合搜索就是网页中组合多个条件,对数据库中进行查询,并且将结果显示在页面中,下面是所做组合查询效果图: 实现代码如下: <1> ...
- 【BZOJ3451】Tyvj1953 Normal - 点分治+FFT
题目来源:NOI2019模拟测试赛(七) 非原题面,题意有略微区别 题意: 吐槽: 心态崩了. 好不容易场上想出一题正解,写了三个小时结果写了个假的点分治,卡成$O(n^2)$ 我退役吧. 题解: 原 ...
- Guava 是个风火轮之基础工具 (1)
转自:http://www.jamespan.me/blog/2015/02/08/guava-basic-utilities-1/ Guava 是个风火轮之基础工具 (1) 前言 Guava 是 J ...