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


Posted in Javascript onJuly 03, 2012

1. 页面效果,自动提示验证信息...
jquery 实现表单验证功能代码(简洁)
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"> 
 <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"> </td><td colspan="3"><input id="Checkbox1" type="checkbox" /><label>超级管理员</label>  <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']" /> </td> 
</tr> 
</table> 
<hr /> 
                
<center> <input id="btn" type="button" value="submit" />  
<input id="ajax_test2" type="button" value="ajax_test2" /></center> 
<div id="loading"></div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
javascript操作cookie
Jan 17 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
JavaScript中的细节分析
Jun 30 #Javascript
JavaScript中的作用域链和闭包
Jun 30 #Javascript
JavaScript中的面向对象介绍
Jun 30 #Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 #Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 #Javascript
Fixie.js 自动填充内容的插件
Jun 28 #Javascript
Javascript的各种节点操作实例演示代码
Jun 27 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
第九节 绑定 [9]
2006/10/09 PHP
十天学会php之第九天
2006/10/09 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
js日期联动示例
2014/05/02 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用cx_freeze把python打包exe示例
2014/01/24 Python
python生成指定尺寸缩略图的示例
2014/05/07 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
中药学自荐信
2014/06/15 职场文书
车间核算员岗位职责
2014/07/01 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技