jQuery Validation实例代码 让验证变得如此容易


Posted in Javascript onOctober 18, 2010

使用客户端验证可以有效的减少数据往返服务器和客户端的次数,有利于提高服务器的资源利用路,并且还能够给用户直观,快速的回应。 在Web 2.0时代,这显得尤其重要,我想大家一定和我一样讨厌用基础的javascript写着烦人的验证。现在服务器端的验证有比较好的框架可以解决,ASP.NET MVC就可以很好的完成这样的工作,所以对于.net开发来说,拥有一个好的客户端养正框架对于开发效率的提高起着至关重要的作用。

我们可以通过下面的地址获得这个JS框架

  • JQuery
  • jQuery Validation Framework

 让我们以一个简单的实例来开始我们对于jQuery Validation Framework的认识吧

 首先,我们需要加入对上面两个JS文件的引用

<head runat="server"> 
<title>Untitled Page</title> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.validate.js" type="text/javascript"></script> 
</head>

接下来,声明下面的HTML段
<form id="customerForm" runat="server"> 
<div> 
First Name: <input type="text" id="FirstName" class="required" name="FirstName" /> 
Last Name: <input type="text" id="LastName" class="required" name="LastName" /> <input type="submit" value="Register" /> 
</div> 
</form>

通过以上代码,大家会发现我们对于每一个input都加上了class="required" 他的作用就是在这个inpute标签为空时会提示用户出错。
最后我们要为我们的框架找到一个切入点,通常,我们可以把下段代码放到HTML的最后
<script language="javascript" type="text/javascript"> 
$(document).ready(function() 
{ 
$("#customerForm").validate(); 
}); 
</script>

运行看看效果如何
jQuery Validation实例代码 让验证变得如此容易 
下面请看一个大一点的例子 为ListBox Control创建常规的验证
我们可以这样添加规则
$("#customerForm").validate( 
{ 
rules: 
{ 
FirstName: { required:true }, 
LastName: { required:true }, 
Countries: { validateCountries:true } 
}, 
messages: 
{ 
FirstName: { required: "First Name is required" }, 
LastName: { required: "Last Name is required" }, 
Countries: { validateCountries:"Please select at least 2 items from the Countries" } 
}, }); 
// add the validate countries method 
jQuery.validator.addMethod("validateCountries", function(value, element) 
{ 
var noOfSelectedCountries = $("#Countries :selected").length; 
if(noOfSelectedCountries < 2) return false; 
return true; 
});

jQuery Validation实例代码 让验证变得如此容易
为错误提供错误信息
$("#customerForm").validate( 
{ 
rules: 
{ 
FirstName: { required:true }, 
LastName: { required:true }, 
Countries: { validateCountries:true } 
}, messages: 
{ 
FirstName: { required: "First Name is required" }, 
LastName: { required: "Last Name is required" }, 
Countries: { validateCountries:"Please select at least 2 items from the Countries" } 
}, 
errorContainer:"#errors", 
errorLabelContainer:"#errors ul", 
wrapper:"li" 
});

效果见下图

jQuery Validation实例代码 让验证变得如此容易 

 好了 不多说了   本文提供源代码下载  自己研究吧  很晚了
源代码下载 http://xiazai.3water.com/201010/yuanma/jQueryValidation_Demo_Download.rar

Javascript 相关文章推荐
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 #Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 #Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 #Javascript
Javascript读取cookie函数代码
Oct 16 #Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 #Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 #Javascript
自己整理的一个javascript日期处理函数
Oct 16 #Javascript
You might like
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
对于Python中RawString的理解介绍
2016/07/07 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
2015秋季幼儿园开学寄语
2015/03/25 职场文书
校长一岗双责责任书
2015/05/09 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
情况说明书格式及范文
2019/06/24 职场文书
话题作文之自信作文
2019/11/15 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
Python语言中的数据类型-序列
2022/02/24 Python