jquery注册页面的判断及代码的优化

今天主要负责完成注册页面的jquery代码的写入与优化,基本代码和登录页面差不多,复制修改一下代码就行了,主要区别在于多了一个重复密码与密码是否一致的判断,刚开始写出来的代码导致每个框的后面都追加重复密码设置的提示,经过反复试验终于完工,具体写法是这样的

var pwd = $("#password").val();

if( $(this).is("#confirmpassword"))

{

if( this.value=="" || this.value != pwd)

{

$parent.append('<span class="formtips onError" >'+CONST_PPWD_ERROR_MSG+'<\/span>');

}else{

$parent.append('<span class="formtips onSuccess">'+CONST_USER_OK_MSG+"<\/span>");

}

}

这样的话就不会出现上边说的那种情况了,整体代码书写如下

<script src="plugins/js/jquery-3.2.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

var CONST_USER_ERROR_MSG = '用户名不少于6位!';

var CONST_USER_OK_MSG = '输入正确!';

var CONST_PWD_ERROR_MSG = '密码不少于六位';

var CONST_EMAIL_ERROR_MSH = 'Email格式不正确.';

var CONST_PPWD_ERROR_MSG = '确认密码与密码不一致或为空!';

$(function()

{

$("form :input.required").each(function()

{

var $required = $("<strong class='high'>&nbsp;&nbsp;*<\/strong>");

$(this).parent().append($required);

});

$('form :input').blur(function()

{

var $parent = $(this).parent();

$parent.find(".formtips").remove();

if( $(this).is("#name"))

{

if( this.value=="" || this.value.length< 7)

{

$parent.append('<span class="formtips onError" >'+CONST_PWD_ERROR_MSG+'<\/span>');

}else{

$parent.append('<span class="formtips onSuccess">'+CONST_USER_OK_MSG+"<\/span>");

}

}

if( $(this).is("#password"))

{

if( this.value=="" || this.value.length<7)

{

$parent.append('<span class="formtips onError" >'+CONST_USER_ERROR_MSG +'<\/span>');

}else{

$parent.append('<span class="formtips onSuccess">'+CONST_USER_OK_MSG+"<\/span>");

}

}

var pwd = $("#password").val();

if( $(this).is("#confirmpassword"))

{

if( this.value=="" || this.value != pwd)

{

$parent.append('<span class="formtips onError" >'+CONST_PPWD_ERROR_MSG+'<\/span>');

}else{

$parent.append('<span class="formtips onSuccess">'+CONST_USER_OK_MSG+"<\/span>");

}

}

if( $(this).is("#email"))

{

if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)))

{

$parent.append('<span class="formtips onError">'+CONST_EMAIL_ERROR_MSH+'<\/span>');

}else{

$parent.append('<span class="formtips onSuccess">'+CONST_USER_OK_MSG+'<\/span>');

}

}

});

$('#send').click(function()

{

$("form :input.required").trigger('blur');

var numError = $('form .onError').length;

if(numError)

{

return false;

}

return true;

});

//$('#res').click(function()

// {

// $(".formtips").romove;

// })

后面的FORM代码是这样的

<form action='signup.php' method='post' accept-charset='UTF-8'>

<table >

<tr>

<td width="20%">Name</td><td width="77%"><input type="text" name="username" /></td><td></td>

</tr>

</table>

</form>

基本就是这样,不过代码还在进一步优化当中,代码中出现重复代码的地方还需要优化。