1.使用之前写过的判断用户名密码的js方法.
2.注册按钮使用a标签(#regbtn),当点击注册按钮时,在js中判断是否满足注册条件,若满足则将信息存入数据库并跳转到登录页面,否则点击无效.
//register.js
$(document).ready(function(){
$("#setuname,#setpwd,#setpwd2").keyup(function(){
//获取用户名及两次输入的密码
var username=$("#setuname").val();
var pwd=$("#setpwd").val();
var pwd2=$("#setpwd2").val();
var s="";
var s2="";
$.get("/spring/check", { username: username},//check方法检查用户名是否合法
function(data){
$("#str1").html(data.str1);//显示在用户名框后
if(data.str1=="用户名已存在"||data.str1=="用户名长度超出范围"||data.str1=="用户名长度太短"
||data.str1=="用户名不能为空"){
$('#setpwd,#setpwd2').attr("disabled",true);
}else{
$('#setpwd,#setpwd2').attr("disabled",false);
if(pwd!=""&&pwd2!=""){
if(pwd.length<6){
s="密码长度太短";
$('#setpwd2').attr("disabled",true);
}else{
$('#setpwd2').attr("disabled",false);
if(pwd!=pwd2){
s="两次密码不相同";
}else if(pwd==pwd2){
s2="ready!"
$('#setpwd2').attr("disabled",false);
}
}
}
}
$("#str2").html(s);//显示在密码框1后
$("#str3").html(s2);//显示在密码框2后
});
});
$("#regbtn").click(
function(){
var s=$("#str3").text();//获取上一个js方法输出的文本(当且仅当为ready!时满足注册条件)
if(s=="ready!"){
var username=$("#setuname").val();
var pwd=$("#setpwd").val();
$.get("/spring/reg", { username: username, password: pwd });
window.location.href="/spring/login.html";
}else{
return false;
}
}
);
});
3.演示