jQuery Validation实例代码 让验证变得如此容易
更新时间：2010年10月18日 00:19:50 作者：
众所周知，Jquery以其简洁性让无数人为之疯狂。现在我要像大家介绍一个jQuery Validation，一看到Validation大家肯定第一直观感觉就是这肯定是一个验证框架，没有错，本文就是基于jQuery Validation展开讨论。
使用客户端验证可以有效的减少数据往返服务器和客户端的次数，有利于提高服务器的资源利用路，并且还能够给用户直观，快速的回应。 在Web 2.0时代，这显得尤其重要，我想大家一定和我一样讨厌用基础的javascript写着烦人的验证。现在服务器端的验证有比较好的框架可以解决，ASP.NET MVC就可以很好的完成这样的工作，所以对于.net开发来说，拥有一个好的客户端养正框架对于开发效率的提高起着至关重要的作用。
我们可以通过下面的地址获得这个JS框架
让我们以一个简单的实例来开始我们对于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>
运行看看效果如何
下面请看一个大一点的例子 为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;
});
为错误提供错误信息
复制代码 代码如下:
$("#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"
});
效果见下图
好了 不多说了 本文提供源代码下载 自己研究吧 很晚了
源代码下载 http://xiazai.jb51.net/201010/yuanma/jQueryValidation_Demo_Download.rar
您可能感兴趣的文章:
- jquery validation验证电话号码,email(实例代码)
- jQuery.Validate 使用笔记(jQuery Validation范例 )
- jQuery 表单验证插件formValidation实现个性化错误提示
- jQuery验证插件validation使用指南
- jQuery Validation插件remote验证方式的Bug解决
- Jquery Validation插件防止重复提交表单的解决方法
- Jquery validation remote 验证的缓存问题解决方法
- jquery插件validation实现验证身份证号等
- 修改jQuery Validation里默认的验证方法
- jquery表单验证插件validation使用方法详解
相关文章
jQuery实现table中两列CheckBox只能选中一个的示例
下面小编就为大家带来一篇jQuery实现table中两列CheckBox只能选中一个的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了jQuery之关于resize()方法的使用，具有很好的价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了Jquery中Event对象属性的操作方法的总结，非常的详细，是篇十分不错的文章，这里推荐给大家。2015-02-02
本文给大家分享基于jquery步骤进度条源码分享，实现功能是这样的，在输入框中输入第3步，点击重新生成按钮，相应的步骤颜色就会加深，对jquery步骤进度条感兴趣的朋友一起看看吧2015-11-11
这篇文章主要介绍了JQuery animate动画应用,结合具体实例形式分析了jQuery使用animate动画实现选项卡及样式动态变化相关操作技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了使用jquery动态加载js文件的方法,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jQuery基础语法,以实例形式分析了jQuery的对象以及针对对象进行的操作用法,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
在下面的集合中，你会发现很多便利的 jQuery 导航插件和有用的教程，帮助你实现充满吸引力的网站导航，让你网站更有组织性和交互性2012-09-09
这篇文章主要介绍了jQuery iScroll.js 移动端滚动条美化插件的相关资料,需要的朋友可以参考下2016-02-02
Jquery 滑入滑出效果实现代码，需要的朋友可以参考下。2010-03-03
最新评论