今天主要負責完成註冊頁面的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 id=‘signup‘ action=‘signup.php‘ method=‘post‘ accept-charset=‘UTF-8‘>
<table style="width:80%;">
<tr>
<td width="20%">Name</td><td width="77%"><input type="text" style="width:300px;" name="username" id="name" class="required"/></td><td width="3%"></td>
</tr>
<tr>
<td>Email</td><td><input type="text" style="width:300px;" name="email" id="email" class="required"/></td><td></td>
</tr>
<tr>
<td>Password</td><td><input type="password" style="width:300px;" name="password" id="password" class="required" /></td><td></td>
</tr>
<tr>
<td>Confirm Password</td><td><input type="password" style="width:300px;" name="confirmpassword" id="confirmpassword" class="required"/></td><td></td>
</tr>
<tr>
<td></td><td><input type="submit" value="submit" style="width:250px;" id="send" /></td><td></td>
</tr>
</table>
</form>

基本就是這樣，不過代碼還在進一步優化當中，代碼中出現重復代碼的地方還需要優化。

jquery註冊頁面的判斷及代碼的優化