表单验证步骤

1、表单验证（点击查看最终效果）

步骤分析：

?将必填文本框（class=”required”）后追加红色小星星加以标识。

$(".int :input.required").each(function(){

var $required="*";

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

});

?给表单元素添加失去焦点事件，判断失去焦点的元素是用户名还是邮箱然后分别进行判断。

?如果是用户名，判断元素的值的长度是否小于6，如果小于6，则用红色提醒用户名输入不正确，反之，用绿色提醒用户输入正确。

?如果是邮箱，判断是否符合邮箱格式，如果不符合，则用红色提醒用户输入不正确，反之，用绿色提醒用户输入正确。

?将提醒元素追加到当前元素的父元素的最后。

代码如下：

$("form :input").blur(function(){

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

//验证用户名

if($(this).is("#username")){

if(this.value==""||this.value.length<2){

var errorMsg="请输入至少2位的用户名";

$parent.append(""+errorMsg+"");

}else{

var okMsg="输入正确";

$parent.append(""+okMsg+"");

}

}

//验证邮箱

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

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

var errorMsg="请输入正确的邮箱名";

$parent.append(""+errorMsg+"");

}else{

var okMsg="输入正确";

$parent.append(""+okMsg+"");

}

}

});

发现问题：由于元素在每次失去焦点后，都会创建一个提醒元素并进行追加，所以出现多次提醒信息。如下图：

如何解决？

?在创建提醒元素前，将当前元素之前的提醒元素都删掉。

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

?输入时就提醒，更加及时

Keyup()事件：在用户每次松开按键时触发

focus()事件：获得鼠标焦点后触发

.keyup(function(){

$(this).triggerHandler("blur");

}).focus(function(){

$(this).triggerHandler("blur");

});//

?提交、重置

//提交，最终验证。

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

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

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

if(numError){

return false;

}

alert("注册成功,密码已发到你的邮箱,请查收.");

});

//重置

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

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

});

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

var $required = $(" *"); //创建元素

$(this).parent().append($required); //然后将它追加到文档中

});

//文本框失去焦点后

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

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

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

//验证用户名

if( $(this).is('#username') )

{

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

{

var errorMsg = '请输入至少2位的用户名';

$parent.append(''+errorMsg+'');

}

else

{

var okMsg = '输入正确';

$parent.append(''+okMsg+'');

}

}

var b=form1.pwd1.value;

if( $(this).is('#pwd1') )

{

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

{

var errorMsg = '请输入密码';

$parent.append(''+errorMsg+'');

}

else

{

var okMsg = '输入正确';

$parent.append(''+okMsg+'');

}

}

var c=form1.pwd2.value;

if($(this).is('#pwd2') )

{

if(this.value=="" || b!=c)

{

var errorMsg = '两次输入密码不一致';

$parent.append(''+errorMsg+'');

}

else

{

var okMsg = '输入正确';

$parent.append(''+okMsg+'');

}

}

//验证邮件

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

{

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

value) ) )

{

var errorMsg = '请输入正确的E-Mail地址';

$parent.append(''+errorMsg+'');

}

else

{

var okMsg = '输入正确';

$parent.append(''+okMsg+'');

}

}

})

.keyup(function(){$(this).triggerHandler("blur");})

.focus(function(){$(this).triggerHandler("blur");});//end blur

//提交，最终验证。

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

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

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

if(numError)

{

return false;

}

alert("注册成功,密码已发到你的邮箱,请查收");

});

//重置

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

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

});