如何使用jquery实现注册功能？
时间：2009-03-17
来源：互联网
我刚学jquery，从网上弄了点代码，想实现一个简易的注册功能，但最后一步不知如何实现，想各位请教。
问题是这样的，在填写信息的过程中，实时的判断数据是否正确，判断完成后，提交前还要判断信息是否正确，如果正确，就提交数据，跳转到另外一个页面。
现在前面的功能都已经实现了，就是不知道信息正确填写后，如何跳转到另一个页面
附上代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.row2 li {
letter-spacing: 2px;
float: left;
width: 400px;
height: 30px;
border: 1px dashed #0066FF;
line-height:30px;
}
.aa {color: #FF0000}
</style>
<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
$("input").not("#send").focus(function(){
$(this).css("border","1px dashed #FF0000").parents().next().css("border","1px dashed #0066FF");//给所选择的元素加一个样式
})
.blur(function(){
var error=true;
var msg=$(this).parents().next(); //获得当前li的下一个li 我们用来显示信息
if($(this).is("#user"))//因为我们是给所有的input绑定的事件所以我们需要判断 到底是哪个input
{
if( this.value=="" || this.value.length < 6 )//我们做一个简单的判断 比如不能为空 并且长度不能小于6
{
msg.css("border","1px dashed #FF0000").html("用户名不能为空或者长度不能小于6！");
}
else
{
$(this).css("border","1px dashed #0066FF")
//msg.addClass("aa").html("通过");
error=false;
}
}
if($(this).is("#email"))
{
var reg = new RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g);
if( this.value=="" || (!reg.test(this.value)) )
{
msg.css("border","1px dashed #FF0000").html("电子邮件不能为空或者格式不对！")
}
else
{
$(this).css("border","1px dashed #0066FF");
//msg.addClass("aa").html("通过");
error=false;
}
}
if(!error)
{
$.get("readnews.asp",{act:$(this).attr("ID"),v:$(this).val()},function(txt){
if (txt=="1")
{
//alert("恭喜您，注册成功");
//$("#form1")[0].submit();
//如果返回值为1，则证明注册成功，跳转到另一个页面，这个功能如何实现？
} else
{
//alert(txt);
msg.html(txt);
}
});
}
})
$("#send").click(function(){
$("input").not("#send").trigger('blur');//当点提交的时候我们在从新触发一下每个元素的blur事件
})
});
//-->
</SCRIPT>
</head>
<body>
<form id="form1" name="form1" method="post" action="starterkit.html">
<ul class="row2">
<li> 用户名： <input name="user" type="text" ID="user" /></li>
<li>请输入用户名密码</li>
<li> email： <input name="email" type="text" ID="email" /></li>
<li>请输email</li>
<li> <INPUT TYPE="button" value="按钮" ID="send" name="send">
</li>
<li>
</li>
</ul>
</form>
</body>
</html>
问题是这样的，在填写信息的过程中，实时的判断数据是否正确，判断完成后，提交前还要判断信息是否正确，如果正确，就提交数据，跳转到另外一个页面。
现在前面的功能都已经实现了，就是不知道信息正确填写后，如何跳转到另一个页面
附上代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.row2 li {
letter-spacing: 2px;
float: left;
width: 400px;
height: 30px;
border: 1px dashed #0066FF;
line-height:30px;
}
.aa {color: #FF0000}
</style>
<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
$("input").not("#send").focus(function(){
$(this).css("border","1px dashed #FF0000").parents().next().css("border","1px dashed #0066FF");//给所选择的元素加一个样式
})
.blur(function(){
var error=true;
var msg=$(this).parents().next(); //获得当前li的下一个li 我们用来显示信息
if($(this).is("#user"))//因为我们是给所有的input绑定的事件所以我们需要判断 到底是哪个input
{
if( this.value=="" || this.value.length < 6 )//我们做一个简单的判断 比如不能为空 并且长度不能小于6
{
msg.css("border","1px dashed #FF0000").html("用户名不能为空或者长度不能小于6！");
}
else
{
$(this).css("border","1px dashed #0066FF")
//msg.addClass("aa").html("通过");
error=false;
}
}
if($(this).is("#email"))
{
var reg = new RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g);
if( this.value=="" || (!reg.test(this.value)) )
{
msg.css("border","1px dashed #FF0000").html("电子邮件不能为空或者格式不对！")
}
else
{
$(this).css("border","1px dashed #0066FF");
//msg.addClass("aa").html("通过");
error=false;
}
}
if(!error)
{
$.get("readnews.asp",{act:$(this).attr("ID"),v:$(this).val()},function(txt){
if (txt=="1")
{
//alert("恭喜您，注册成功");
//$("#form1")[0].submit();
//如果返回值为1，则证明注册成功，跳转到另一个页面，这个功能如何实现？
} else
{
//alert(txt);
msg.html(txt);
}
});
}
})
$("#send").click(function(){
$("input").not("#send").trigger('blur');//当点提交的时候我们在从新触发一下每个元素的blur事件
})
});
//-->
</SCRIPT>
</head>
<body>
<form id="form1" name="form1" method="post" action="starterkit.html">
<ul class="row2">
<li> 用户名： <input name="user" type="text" ID="user" /></li>
<li>请输入用户名密码</li>
<li> email： <input name="email" type="text" ID="email" /></li>
<li>请输email</li>
<li> <INPUT TYPE="button" value="按钮" ID="send" name="send">
</li>
<li>
</li>
</ul>
</form>
</body>
</html>
作者: cjfriends 发布时间: 2009-03-17
用红颜色 标出 且加粗 的地方就是要实现 正确提交后 跳转页面的地方,如何实现？
作者: cjfriends 发布时间: 2009-03-17
在线等，望高手赐教
作者: cjfriends 发布时间: 2009-03-17
同求，呵呵
作者: fsfotong 发布时间: 2009-03-17
跳转？改window.location就行
作者: shawphy 发布时间: 2009-03-17
这个问题通过请教高手已经解决，根本不是代码的问题，而是逻辑不对，现在将正确的代码贴上来，谢谢大家的支持！
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.row2 li {
letter-spacing: 2px;
float: left;
width: 400px;
height: 30px;
border: 1px dashed #0066FF;
line-height:30px;
}
.aa {color: #FF0000}
</style>
<script type="text/javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
error=true;
$(document).ready(function() {
$("input").not("#send").focus(function(){
$(this).css("border","1px dashed #FF0000").parent().next().css("border","1px dashed #0066FF");//给所选择的元素加一个样式
})
.blur(function(){
var msg=$(this).parent().next(); //获得当前li的下一个li 我们用来显示信息
if($(this).is("#user"))//因为我们是给所有的input绑定的事件所以我们需要判断 到底是哪个input
{
if(this.value=="")
{
msg.html("<div style='width:300px; background-color:#FEECA5;'>Please enter your name！</div>");
error=true;
}else if(this.value.length < 6 )
{
msg.html("<div style='width:300px; background-color:#FEECA5;'>用户名长度不能小于6！</div>");
error=true;
}
else
{
$(this).css("border","1px dashed #0066FF")
msg.addClass("aa").html("填写正确");
error=false;
}
}
if($(this).is("#email"))
{
var reg = new RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g);
if( this.value=="" || (!reg.test(this.value)) )
{
msg.css("border","1px dashed #FF0000").html("电子邮件不能为空或者格式不对！");
error=true;
}
else
{
$(this).css("border","1px dashed #0066FF");
msg.addClass("aa").html("通过");
error=false;
}
}
})
$("#send").click(function(){
var msg=$(this).parents().next();
// alert($('#form1').serialize());
$("input").not("#send").trigger('blur');//当点提交的时候我们在从新触发一下每个元素的blur事件
//alert(error);
if(!error)
{
$.ajax({
url: 'readnews.asp?action=send',
data: $('#form1').serialize(), // 从表单中获取数据
type: 'GET', // 设置请求类型为 ‘POST’，默认为 ‘GET’
success:function(txt){
if (txt == "1"){
alert("恭喜，注册成功");
$("#form1")[0].submit();
}
else
{
alert("注册失败");
}
// msg.addClass("aa").html(txt);
}
});
}
})
});
//-->
</SCRIPT>
</head>
<body>
<form id="form1" name="form1" method="post" action="readnews.asp">
<ul class="row2">
<li> 用户名： <input name="user" type="text" ID="user" /></li>
<li></li>
<li> email： <input name="email" type="text" ID="email" /></li>
<li></li>
<li> <INPUT TYPE="button" value="提交" ID="send" name="btn_send">
</li>
<li>
</li>
</ul>
</form>
</body>
</html>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.row2 li {
letter-spacing: 2px;
float: left;
width: 400px;
height: 30px;
border: 1px dashed #0066FF;
line-height:30px;
}
.aa {color: #FF0000}
</style>
<script type="text/javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
error=true;
$(document).ready(function() {
$("input").not("#send").focus(function(){
$(this).css("border","1px dashed #FF0000").parent().next().css("border","1px dashed #0066FF");//给所选择的元素加一个样式
})
.blur(function(){
var msg=$(this).parent().next(); //获得当前li的下一个li 我们用来显示信息
if($(this).is("#user"))//因为我们是给所有的input绑定的事件所以我们需要判断 到底是哪个input
{
if(this.value=="")
{
msg.html("<div style='width:300px; background-color:#FEECA5;'>Please enter your name！</div>");
error=true;
}else if(this.value.length < 6 )
{
msg.html("<div style='width:300px; background-color:#FEECA5;'>用户名长度不能小于6！</div>");
error=true;
}
else
{
$(this).css("border","1px dashed #0066FF")
msg.addClass("aa").html("填写正确");
error=false;
}
}
if($(this).is("#email"))
{
var reg = new RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g);
if( this.value=="" || (!reg.test(this.value)) )
{
msg.css("border","1px dashed #FF0000").html("电子邮件不能为空或者格式不对！");
error=true;
}
else
{
$(this).css("border","1px dashed #0066FF");
msg.addClass("aa").html("通过");
error=false;
}
}
})
$("#send").click(function(){
var msg=$(this).parents().next();
// alert($('#form1').serialize());
$("input").not("#send").trigger('blur');//当点提交的时候我们在从新触发一下每个元素的blur事件
//alert(error);
if(!error)
{
$.ajax({
url: 'readnews.asp?action=send',
data: $('#form1').serialize(), // 从表单中获取数据
type: 'GET', // 设置请求类型为 ‘POST’，默认为 ‘GET’
success:function(txt){
if (txt == "1"){
alert("恭喜，注册成功");
$("#form1")[0].submit();
}
else
{
alert("注册失败");
}
// msg.addClass("aa").html(txt);
}
});
}
})
});
//-->
</SCRIPT>
</head>
<body>
<form id="form1" name="form1" method="post" action="readnews.asp">
<ul class="row2">
<li> 用户名： <input name="user" type="text" ID="user" /></li>
<li></li>
<li> email： <input name="email" type="text" ID="email" /></li>
<li></li>
<li> <INPUT TYPE="button" value="提交" ID="send" name="btn_send">
</li>
<li>
</li>
</ul>
</form>
</body>
</html>
作者: cjfriends 发布时间: 2009-03-18
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
