用户注册信息的验证不止需要验证用户名是否已经存在，还有其他的验证，比如不能为空、字符长度控制，而且所有输入框都要验证，这么多的条件满足后才能提交，用Jquery该如何实现呢。

比较简单，也没有啥好说的，直接上代码吧。

点击(此处)折叠或打开

<script type="text/javascript">
$(document).ready(function(){
var okemail = false;
var okname = false;
var okpassword1 = false;
var okpassword2 = false;
$("#password1").focus(function(){
$("#password1span").html("密码应在6-20位之间");
}).blur(function(){
var password1 = $("#password1").val();
if(password1.length >= 6 && password1.length <=20 && password1!=''){
$("#password1span").html("<b>输入成功</b>");
okpassword1=true;
}else{
$("#password1span").html("<b>密码应在6-20位之间</b>");
}
});
$("#password2").focus(function(){
$("#password2span").html("请和上次密码相同");
}).blur(function(){
var password2 = $("#password2").val();
var password1 = $("#password1").val();
if(password2.length >= 6 && password2.length <=20 && password2!='' && password2 == password1){
$("#password2span").html("<b>验证成功</b>");
okpassword2=true;
}else{
$("#password2span").html("<b>请和第一次输入密码相同</b>");
}
});
$("#name").focus(function(){
$("#namespan").html("用户名应在3-12位之间");
}).blur(function(){
var username = $("#name").val();
$.ajax({
async: false, //默认为true，即请求为异步请求
timeout:5000, //设置请求超时时间（毫秒）
dataType:"json", //返回的数据类型
type: "post", //设置请求方式
url: "test", //设置请求URL
data: "word=name&username="+username, //设置传递的参数值
success:function(msg){ //设置响应成功之后执行的回调函数
if(username.length >= 3 && username.length <=12 && username!=''){
/* $("#namespan").html(""); */
if(msg.existName==true){
$("#namespan").html("<b>名称可用</b>");
}else{
$("#namespan").html("<b>名称已被使用，换一个</b>");
}
}else{
$("#namespan").html("<b>用户名应在3-12位之间</b>");
}
},
error:function(){ //设置响应失败之后执行的回调函数
alert("失败喽");
}
});
});
//-----------------------------------------------------------------------------------------------
$("#mail").focus(function(){
$("#em").html("邮箱不能为空，");
}).blur(function(){
//获取邮箱地址
var em = $("#mail").val();
$.ajax({
async: false, //默认为true，即请求为异步请求
timeout:5000, //设置请求超时时间（毫秒）
dataType:"json", //返回的数据类型
type: "post", //设置请求方式
url: "test", //设置请求URL
data: "word=email&email="+em, //设置传递的参数值
success:function(msg){ //设置响应成功之后执行的回调函数
if(msg.existEmail==true){
$("#em").html("<b>邮箱未被注册，可以使用</b>");
okemail = true;
}else{
$("#em").html("<b>邮箱已被注册，换一个</b>");
}
},
error:function(){ //设置响应失败之后执行的回调函数
alert("失败喽");
}
});
if(em.search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
$("#em").html("请输入正确的邮箱格式");
}
});
//------------------------------------------------------------------------------------------------------
$('#submit').click(function(){
if(okemail && okname && okpassword1 &&okpassword2){
$('form').submit();
}else{
return false;
}
});
});
</script>

html代码如下：

点击(此处)折叠或打开

注册<br/>
<form action="user?action=register" method="post">
用户名<input type="text" name="username" id="name" ><span id="namespan"> </span><br/>
密码<input type="password" name="passwd" id="password1"> <span id="password1span"></span> <br/>
确认密码<input type="password" name="passwd2" id="password2"> <span id="password2span"></span> <br/>
邮箱<input type="text" name="email" id="mail"><span id="em"> </span> <br/>
<input type="submit" id="submit" value="注册"/>
</form>

这样就ok了。

ITPub博客

从用户管理系统中复习javaweb知识10

最新文章