1.编辑注册的jsp页面
以下几点需要特别注意：
- 输入框的id要和显示该输入框的错误id相对应，例如输入框的id为“loginname”，则该输入框的显示错误信息的id为"loginnameError"
- 所有显示错误信息的控件加<label></label>标签（暂时我还不知道有啥用处)
- 给所有显示错误信息的label标签添加calss属性，以便在js代码中批量处理错误信息。如这里就将添加了 class="labelError"
- 同理，给输入框和文本框也添加相应的class属性，以便以后批量处理class="tdLabel" class="tdInput"
<tr>
<td class="tdLabel">用户名：</td>
<td class="tdInput">
<input type="text" name="loginname" id="loginname" class="input" value=""/>
</td>
<td class="tdError">
<label class="labelError" id="loginnameError">用户名不能为空！</label>
</td>
</tr>
<tr>
<td class="tdLabel">登录密码：</td>
<td class="tdInput">
<input type="password" name="loginpass" id="loginpass" class="input" value=""/>
</td>
<td class="tdError">
<label class="labelError" id="loginpassError"></label>
</td>
</tr>
2.在jsp页面中引入c标签和jsp和css文件（本笔记不涉及css）
//引入c标签
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
//引入js和css(在<head>标签中
<link rel="stylesheet" type="text/css" href="<c:url value='/css/css.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='/js/common.js'/>"></script>
<script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>
3.循环遍历错误信息
- 新建一个js文件，并在jsp页面中引入该js(见2）
- 新建一个$(function(){})类型的函数(该函数在页面加载的时候自动调用，和java中的main函数意义差不多，因此，可以在该函数中，填写函数调用其它函数），该函数中遍历class为labelError的元素，在该函数中调用showError(ele) 函数
- 新建showError(ele)函数，ele参数为传过来的errorlabel的id如何该id的text有内容，则显示，否则，隐藏
$(function() {
/**
* 1.得到所有的错误信息，循环遍历
* 调用一个方法来确定是否显示错误信息
*/
$(".labelError").each(function() {//得到class为labelError的元素，循环遍历
showError($(this));//调用showError函数，且传入当前labelError的id
});
});
/**
* 判断当前元素是否有内容，如果有，则显示，如果没有，则不显示
* @param ele
*/
function showError(ele) {
var text =ele.text();//获取元素的内容,你输入的用户名为空
if(!text){//如果没有内容
// ele.css("display","none");//隐藏元素
ele.hide();
}else{//如果有内容
// ele.css("dispaly","");//显示元素
ele.show();
}
}
4.输入框得到焦点，错误信息消失
首先的到当前id，将其文本内容置空，再调用showError函数
//在$(function(){})函数中添加这个函数
$(".input").focus(function() {
var lablId=$(this).attr("id")+"Error";//得到当前的labelError的id
$("#"+lablId).text("");//将当前labelError的文本内容置为空
showError($("#"+lablId));//调用showError()函数
});
5.输入框失去焦点，校验输入框内容
- 在主函数中添加得到失去焦点的函数
- 得到当前输入框的id的值
- 通过id的值得到当前输入框需要调用的函数
- 通过该函数对输入框进行校验
- 首先在该函数中新建一个id变量，这个变量的值设为当前的id值
- 得到这个id值得value
- 如果对value进行非空校验、长度校验等等一系列措施
- 校验之后，得到当前输入框的错误显示框的id，并将其text设为你要显示的信息
- 调用showErro()方法
//在$(function(){})函数中添加这个函数
/**
* 输入框失去焦点，则校验输入框的内容
*/
$(".input").blur(function() {
//得到当前输入框的id的值
var input=$(this).attr("id");
//得到当前id所应该调用的方法，方法名得到的方法为(calidate+input的id值的第一个字母大写+剩余的id值+（）
var funName="validate"+input.substring(0,1).toUpperCase()+input.substring(1)+"()";
//调用名为funname的方法
eval(funName);
});
//以下在main函数外调用
/**
* 用户名校验
*/
function validateLoginname() {
// alert(1);
var id="loginname";
var value=$("#"+id).val();
/**
* 非空校验
*/
if(!value){
$("#"+id+"Error").text("你输入的用户名为空！");
showError($("#"+id+"Error"));
return false;
}
/**
* 用户名长度校验
*/
if(value.length<3 || value.length>10){
$("#"+id+"Error").text("请输入3-10个字符串！");
showError($("#"+id+"Error"));
return false;
}
/**
* 用户名数据库校验
*/
return true;
}
/**
* 登录密码校验
*/
function validateLoginpass() {
var id="loginpass";
var value=$("#"+id).val();
/**
* 空值校验
*/
if(!value){
$("#"+id+"Error").text("你输入的密码为空！");
showError($("#"+id+"Error"));
return false;
}
/**
* 密码长度校验
*/
if(value.length<8 || value.length>20){
$("#"+id+"Error").text("请输入的密码少于8位！");
showError($("#"+id+"Error"));
return false;
}
return true;
}
/**
* 确认密码校验
*/
function validateReloginpass() {
var id="reloginpass";
var value=$("#"+id).val();
var repass=$("#loginpass").val();
/**
* 空值校验
*/
if(!value){
$("#"+id+"Error").text("你输入的密码为空！");
showError($("#"+id+"Error"));
return false;
}
/**
* 密码确认校验
*/
if(value!=repass){
$("#"+id+"Error").text("你输入的两次密码不同！");
showError($("#"+id+"Error"));
return false;
}
return true;
}
/**
* 邮箱校验
*/
function validateEmail() {
var id="email";
var value=$("#"+id).val();
/**
* 空值校验
*/
if(!value){
$("#"+id+"Error").text("你输入的邮箱为空！");
showError($("#"+id+"Error"));
return false;
}
/**
* 邮箱格式校验
*/
if(!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value))){
$("#"+id+"Error").text("你的邮箱格式错误！");
showError($("#"+id+"Error"));
return false;
}
/**
* 服务器校验
*/
return true;
}
/**
* 验证码校验
*/
function validateVerifyCode() {
var id="verifyCode";
var value=$("#"+id).val();
/**
* 空值校验
*/
if(!value){
$("#"+id+"Error").text("你输入的验证码为空！");
showError($("#"+id+"Error"));
return false;
}
/**
* 验证码长度校验
*/
if(value.length!=4){
$("#"+id+"Error").text("验证码错误！");
showError($("#"+id+"Error"));
return false;
}
/**
* 服务器校验
*/
return true;
}
6.成功界面
2380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
