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_-])[email protected]([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());
}
时间： 2024-10-25 09:50:59