天天看点

AJax / JQuery 注册应用小实例

在学习中学到的一点AJax / JQuery 的小皮毛。随笔记下来了。

在我做的网站中用于用户注册的时候,验证邮箱/用户名、密码、昵称.....的合法正确性。

需要装入jquery-1.2.6.download.js后使用。看代码,多指教:

<HEAD>

<mce:script type="text/javascript"

src="<%=basePath%><!--

js/jquery-1.2.6.download.js">

// --></mce:script>

<mce:script type="text/javascript"><!--

//判断邮箱是否为空、格式是否正确

var flagCheckEmail=false;

function checkEmail()

{

var emailObj = $("#email"); //取到id="email"的组件对象

var emailValue = emailObj.val(); //取组件对象的value

var e_hintObj=$("#e_hint");

if(emailValue.search(/^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)[A-Za-z0-9]+)*/.[A-Za-z0-9]+$/) != -1)

{

e_hintObj.html("<font color='red'>格式正确</font>");

checkEmailExist();

}else{

e_hintObj.html("<font color='red'>格式错误</font>");

flagCheckEmail=false;

}

}

function checkEmailExist()

{

var emailObj=$("#email");

var emailValue=emailObj.val();

$.get("<%=basePath%>servlet/CheckEmailServlet?checkEmail="+ emailValue, null, handlerRequest);

}

function handlerRequest(data) {

var e_hintObj = $("#e_hint");

if (/true/.test(data)) {

e_hintObj.html("<font color='red'>该邮箱已注册</font>");

flagCheckEmail = false;

} else {

e_hintObj.html("<font color='red'>恭喜,可以使用的邮箱</font>");

flagCheckEmail = true;

}

}

//判断密码是否为空

var flagcheckpwd = false;

function checkPwd() {

var pwdObj = $("#password"); //取到id="password"的组件对象

var pwdValue = pwdObj.val(); //取组件对象的value

var p_hintObj = $("#p_hint"); //取span中的p_hint

if (pwdValue == "") {

p_hintObj.html("<font color='red'>密码不能为空</font>");

flagcheckpwd = false;

} else {

p_hintObj.html("<font color='red'>填写正确</font>");

flagcheckpwd = true;

}

}

//判断用户昵称是否为空

var flagchecknickname = false;

function checkNickname() {

var nickNameObj = $("#name"); //取到id="name"的组件对象

var nickNameValue = nickNameObj.val(); //取组件对象的value

var n_hintObj = $("#n_hint"); //取span中的n_hint

if (nickNameValue == "") {

n_hintObj.html("<font color='red'>用昵称不能为空</font>");

flagchecknickname = false;

} else {

n_hintObj.html("<font color='red'>格式正确</font>");

flagchecknickname = true;

}

}

//添加按钮点击事件

//方法1

function save() {

checkEmail();

if (flagCheckEmail) {

checkPwd();

if (flagcheckpwd) {

checkNickname();

if (flagchecknickname) {

document.lzform.submit();

}

}

}

}

//方法2

/*function save(){

checkEmail();

checkPwd();

checkNickname();

if(flagCheckEmail&flagcheckpwd&flagchecknickname){

document.lzform.submit();

}

}*/

// --></mce:script>

</HEAD>