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函数
Dec 22 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
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
PHP XML备份Mysql数据库
2009/05/27 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
php 可变函数使用小结
2018/06/12 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
利用python获得时间的实例说明
2013/03/25 Python
获取Django项目的全部url方法详解
2017/10/26 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
python集合常见运算案例解析
2019/10/17 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
上海天奕面试题笔试题
2015/04/19 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
自我评价200字分享
2013/12/17 职场文书
班主任工作年限证明
2014/01/12 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL