|
|
发表于 2011-10-31 13:37:06
|
显示全部楼层
Re:-如何通过切换文本框焦点，实现頁面数据有效性验
<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>用户注册 - 京东商城</title>
<link href="../css/login.css" rel="stylesheet" type="text/css" />
<link href="../css/page_bottom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script>
$(function(){
$('#f').validate(
{
rules:{
email:{required:true,email:true,
remote:{
url:"../registEmail.do",
type:"post",
dataType:"json",
data:{
email:function(){
return $("#txtEmail").val();
}
}
}
},
nickname:{required:true,rangelength:[4,20]},
pwd:{required:true,rangelength:[4,20]},
password1:{required:true,rangelength:[4,20],equalTo:"#txtPassword"},
number:{required:true,
remote:{
url:"../registNum.do",
type:"post",
dataType:"json",
data:{
number:function(){
return $("#txtVerifyCode").val();
}
}
}
}
},
messages:{
email:{required:"email不能为空",email:"請输入正确的email格式",remote:"email已被占用"},
nickname:{required:"用戶名不能为空",rangelength:"密码应为4-20位之間"},
pwd:{required:"密码不能为空",rangelength:"密码应為4-20位之间"},
password1:{required:"密码不能为空",rangelength:"密码應为4-20位之间",equalTo:"两次密码不一致"},
number:{required:"验证码不能为空",remote:"验证碼输入不对"}
},
errorPlacement: function(error,element){
error.appendTo(element.next().find("span"));
}
}
);
});
</script>
</head>
<body>
<%@include file="../common/head1.jsp"%>
<div class="login_step">
<img src="../images/5.gif" height="50px;"/>
注册步骤:
<span class="red_bold">1.填写信息</span> > 2.验证邮箱 > 3.注册成功
</div>
<div class="fill_message">
<form name="ctl00" method="post" action="../RegistOk.do" id="f">
<h2>
以下均为必填項
</h2>
<table class="tab_login" >
<tr>
<td valign="top" class="w1">
請填寫您的Email地址：
</td>
<td>
<input name="email" type="text" id="txtEmail" class="text_input"/>
<div class="text_left" id="emailValidMsg">
<p>
请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
</p>
<span id="email.info" style="color:red"></span>
</div>
</td>
</tr>
<tr>
<td valign="top" class="w1">
设置您在京东网的昵称：
</td>
<td>
<input name="nickname" type="text" id="txtNickName" class="text_input" />
<div class="text_left" id="nickNameValidMsg">
<p>
您的昵稱可以由小写英文字母、中文、数字组成，
</p>
<p>
长度4－20个字符，一个漢字为两個字符。
</p>
<span id="name.info" style="color:red"></span>
</div>
</td>
</tr>
<tr>
<td valign="top" class="w1">
设置密碼：
</td>
<td>
<input name="pwd" type="password" id="txtPassword"
class="text_input" />
<div class="text_left" id="passwordValidMsg">
<p>
您的密碼可以由大小写英文字母、数字组成，长度6－20位。
</p>
<span id="password.info" style="color:red"></span>
</div>
</td>
</tr>
<tr>
<td valign="top" class="w1">
再次输入您設置的密碼：
</td>
<td>
<input name="password1" type="password" id="txtRepeatPass"
class="text_input"/>
<div class="text_left" id="repeatPassValidMsg">
<span id="password1.info" style="color:red"></span>
</div>
</td>
</tr>
<tr>
<td valign="top" class="w1">
驗证碼：
</td>
<td>
<img class="yzm_img" id='imgVcode' src="../check.do" />
<input name="number" type="text" id="txtVerifyCode"
class="yzm_input"/>
<div class="text_left t1">
<p class="t1">
請输入图片中的四個字母。
<span id="number.info" style="color:red"></span>
<a href="javascript:;" onclick="document.getElementById('imgVcode').src = '../check.do?'+(new Date()).getTime()">看不清楚？換个图片</a>
</p>
</div>
</td>
</tr>
</table>
<div class="login_in">
<input id="btnClientRegister" class="button_1" name="submit" type="submit" value="注 册"/>
</div>
</form>
</div>
<%@include file="../common/foot.jsp"%>
</body>
</html>
這是我做毕设项目的注册页面，自己对照一下，你的这些问题全能解決的， |
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
楼主