jquery 实现表单验证功能代码(简洁)

更新时间：2012年07月03日 11:11:47 作者：

jquery 实现表单验证功能代码,代码比较简洁，需要的朋友可以参考下

1. 页面效果，自动提示验证信息...

2. 页面代码

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>表单验证页面</title> 
<link href="../Scripts/themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="../Scripts/jquery.easyui.min.js" type="text/javascript"></script> 
<script src="../Scripts/validator.js" type="text/javascript"></script> 
<script src="../Scripts/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(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("<img src='../Scripts/loader.gif' />"); 
}, 
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('验证通过！'); 
} 
}); 
}); 
</script> 
<style type="text/css"> 
#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; 
} 
</style> 
</head> 
<body > 
<form id="uiform" title="表单验证页面" class="easyui-window"> 
&nbsp;<br /> 
<table > 
<tr> 
<td class="style9">登录名：</td> 
<td class="style10"><input required="true" id="txtUsername" type="text" class="txt03" validType="account[4,20]" /></td> 
<td class="style11">真实姓名：</td><td class="style12"><input id="txtTruename" validType="CHS" required="true" type="text" class="txt03" /></td> 
</tr> 
<tr> 
<td class="style13">登录密码：</td> 
<td class="style14"><input validType="password" required="true" id="txtPassword" name="password" type="password" class="txt03" /></td> 
<td class="style15">Email：</td> 
<td class="style16"><input id="txtEmail" name="email" validType="email" type="text" class="txt03" /></td> 
</tr> 
<tr> 
<td class="style4">身份证号：</td><td class="style7"><input validType="idcard" id="txtIdcard" name="idcard" type="text" class="txt03" /></td> 
<td class="style5">QQ：</td> 
<td class="style8"><input validType="QQ" id="txtQq" name="qq" type="text" class="txt03" /></td> 
</tr> 
<tr> 
<td class="style4">手机：</td><td class="style7"><input validType="mobile" id="txtMobile" name="mobile" type="text" class="txt03" /></td> 
<td class="style5">电话：</td><td class="style8"><input id="txtTel" validType="phone" name="tel" type="text" class="txt03" /></td> 
</tr> 
<tr> 
<td class="style4">邮编：</td><td class="style7"><input validType="ZIP" 
id="txtZIP" name="txtZIP" type="text" class="txt03" /></td> 
<td class="style5">年龄：</td><td class="style8"> 
<input validType="number" 
id="txtZIP0" name="txtZIP0" type="text" class="txt03" /></td> 
</tr> 
<tr> 
<td class="style4">备注：</td><td colspan="3"> </textarea> 
<input type="text" class="easyui-validatebox" required="true" validType="minLength[50]" 
style="width:41%; height: 74px;" class="txt03" id="txtRemark"></td> 
</tr> 
<tr> 
<td class="style4">&nbsp;</td><td colspan="3"><input id="Checkbox1" type="checkbox" /><label>超级管理员</label>&nbsp;&nbsp;<input id="Checkbox2" type="checkbox" /><label>禁用</label></td> 
</tr> 
<tr> 
<td class="style4">text</td><td colspan="3"> 
<input id="name" type="text" class="easyui-validatebox" 
missingMessage="当文本框是空时出现的提示文字。" invalidMessage="当文本框的内容无效时出现的提示文字" required="true" validType="minLength[5]" /></td> 
</tr> 
<tr> 
<td class="style4">文本框比对：</td><td colspan="3"> 
<input type="password" id="txtpasswd" class="easyui-validatebox" required="true" validType="password" /> 2<input type="password" id="txtpasswd2" class="easyui-validatebox" required="true" validType="equalTo['#txtpasswd']" />&nbsp;</td> 
</tr> 
</table> 
<hr /> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<center> <input id="btn" type="button" value="submit" />&nbsp; 
<input id="ajax_test2" type="button" value="ajax_test2" /></center> 
<div id="loading"></div> 
</form> 
</body> 
</html> 

您可能感兴趣的文章:

表单验证

JQuery 返回布尔值Is()条件判断方法代码
JQuery里面的方法大多是返回JQuery对角.而Is（）方法，返回的一个布尔值
2012-05-05
jquery 实现两级导航菜单附效果图
两级导航菜单在网页中非常实用，实现的方法也有很多，本文为大家介绍下使用jquery是如何实现的
2014-03-03
可以显示单图片，多图片ajax请求的ThickBox3.1类下载
ThickBox是一个基于JQuery类库的扩展以下的是ThickBox3.1的实例+代码调用方法
2007-12-12
jquery+css3实现熊猫tv导航代码分享
本篇文章给大家详细分享的是jquery+css3来写出熊猫tv导航的效果，以及代码分享，喜欢的朋友参考下。
2018-02-02
JQuery的Pager分页器实现代码
这篇文章主要为大家详细介绍了JQuery的Pager分页器实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
jQuery使用drag效果实现自由拖拽div
本文给大家分享一款jquery实现的完美拖拽(拖动div层效果)，如果你正在找这类效果不妨进入参考一下。
2015-06-06
jQuery的animate函数学习记录
jQuery.animate的每种动画过渡效果都是通过easing函数实现的，下面是自己研究之后对其的基本认识
2014-08-08
jquery常用函数与方法汇总
本篇文章给大家分享jquery常用的函数与方法，有需要的朋友一起来学习下
2015-09-09
jquery点击改变class并toggle的实现代码
下面小编就为大家带来一篇jquery点击改变class并toggle的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
Bookmarklet实现启动jQuery(模仿云输入法)
最近流行的 sogo云输入法， QQ云输入法，都用到了bookmarklet技术。
2010-09-09