今天主要负责完成注册页面的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‘> *<\/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!="" && !/[email protected]+\.[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>
基本就是这样，不过代码还在进一步优化当中，代码中出现重复代码的地方还需要优化。