jquery实现表单验证的一例代码，实现页面效果：自动提示验证信息等。

页面代码：

 
 
表单验证页面-www. 
 
 
 
 
 
 
$(function () { 
//加载验证信息 
$('#uiform input').each(function () { 
if ($(this).attr('required') || $(this).attr('validType')) 
$(this).validatebox(); 
}) 
$('#ajax_test2').click(function () { 
$.ajax({ 
url: "../Handler1.ashx?Menthod=Login", 
type: 'post', 
data: {name:"123456"}, 
timeout: 30000, 
beforeSend: function (XMLHttpRequest) { 
//alert('远程调用开始...'); 
$("#loading").html(""); 
}, 
success: function (data, textStatus) { 
alert('开始回调，状态文本值：' + textStatus + ' 返回数据：' + data); 
$("#loading").empty(); 
}, 
complete: function (XMLHttpRequest, textStatus) { 
alert('远程调用成功，状态文本值：'+textStatus); 
$("#loading").empty(); 
}, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
alert('error...状态文本值：' + textStatus + " 异常信息：" + errorThrown); 
$("#loading").empty(); 
} 
}); 
}); 
$("#btn").click(function () { 
var flag = true; 
flag = $("#uiform").form("validate"); 
// $('#uiform input').each(function () { 
// if ($(this).attr('required') || $(this).attr('validType')) { 
// if (!$(this).validatebox('isValid')) { 
// flag = false; 
// return; 
// } 
// } 
// }) 
if (flag) { 
$("#uiform").form("destroy"); 
alert('验证通过！'); 
} 
}); 
}); 
 
 
#name 
{ 
width: 191px; 
} 
.style4 
{ 
width: 100px; 
} 
.style5 
{ 
width: 98px; 
} 
#txtPassword 
{ 
width: 150px; 
} 
.style7 
{ 
width: 371px; 
} 
.style8 
{ 
width: 420px; 
} 
#btn 
{ 
width: 86px; 
} 
.style9 
{ 
width: 100px; 
height: 26px; 
} 
.style10 
{ 
width: 371px; 
height: 26px; 
} 
.style11 
{ 
width: 98px; 
height: 26px; 
} 
.style12 
{ 
width: 420px; 
height: 26px; 
} 
.style13 
{ 
width: 100px; 
height: 25px; 
} 
.style14 
{ 
width: 371px; 
height: 25px; 
} 
.style15 
{ 
width: 98px; 
height: 25px; 
} 
.style16 
{ 
width: 420px; 
height: 25px; 
} 
 
 
 
 
 
 
 
 
登录名： 
 
真实姓名：
 
 
 
登录密码： 
 
Email： 
 
 
 
身份证号：
 
QQ： 
 
 
 
手机：
 
电话： 
 
 
邮编： 
年龄： 
 
 
 
备注：  
 
 
 
 超级管理员  
禁用 
 
 
text 

 
 
 
文本框比对： 
 2  
 
 
                 
   
 
 
 
 

您可能感兴趣的文章: