在页面上面引用

<script  type="text/JavaScript" src="js/jQuery.js"></script>
<script type="text/JavaScript" src="js/jquery.form.js"></script>
<script type="text/JavaScript" src="js/jquery.validate.js"></script>
<script type="text/JavaScript" src="validator/jquery.metadata.js"></script>
<script type="text/JavaScript" src="js/localization/messages_cn.js"></script>

页面html代码

<form id='form1'>
<fieldset>
<legend>jquery.validate+jquery.form</legend>
<p>
<label for='cusername'>
姓名</label><em>*</em>
<input id='cusername' name='username' class="{required:true,minlength:5}" size='' />
</p>
<p>
<label for='cemail'>
电子邮件</label><em>*</em>
<input id='cemail' name='email' class="{required:true,email:true}" size='' />
</p>
<p>
<input class='submit' type='submit' value='提交'>
</p>
</fieldset>
</form>

执行js代码

$().ready( function() {
$(function() {
//表单验证JS
$("#form1").validate({
//出错时添加的标签
errorElement: "span",
success: function(label) {
//正确时的样式
label.text(" ").addClass("success");
}
});
}); });

在html的代码中input的class属性为{required:true,email:true}意思是在
js/localization/messages_cn.js里面有说明,代码如下
jQuery.extend(jQuery.validator.messages, {
required: "必填字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});

如果需要将提交方式改成ajax提交

<form id='form1'>
<fieldset>
<legend>jquery.validate+jquery.form</legend>
<p>
<label for='cusername'>
姓名</label><em>*</em>
<input id='cusername' name='username' class="{required:true,minlength:5}" size='25' />
</p>
<p>
<label for='cemail'>
电子邮件</label><em>*</em>
<input id='cemail' name='email' class="{required:true,email:true}" size='25' />
</p>
<p>
<input type='button' id='btnSubmit' value='提交'>
</p>
</fieldset>
</form>

js代码是

$("#btnSubmit").click(function () {
var param = $("#form1").serialize();//序列化
if ($("#form1").valid()) {//通过验证才进入ajax
$.ajax(
{
url: "xxx.ashx",
type: "get",
data: param,
dataType: "json",
success: function(data) {
alert(data);
}
});
}
});

jquery.validate的使用的更多相关文章

  1. jQuery Validate 表单验证 — 用户注册简单应用

    相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...

  2. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  3. 修改 jquery.validate.js 支持非form标签

    尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...

  4. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  5. Jquery客户端校验——jquery.validate.js

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  6. jquery.validate不用submit而用js提交的例子

    $("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...

  7. ASP.NET MVC 5 Jquery Validate

    ClientValidationEnabled 在asp.net mvc 5中ClientValidationEnabled默认为TRUE,所以也不需要刻意去设置 应用ValidationAttrib ...

  8. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  9. JS验证控件jQuery Validate

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  10. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

随机推荐

  1. DataSet与DataAdapter的关系

    DataSet 作用:DataSet,DataAdapter读取数据. 问:什么是DataAdapter?答:DataAdapter对象在DataSet与数据之间起桥梁作用 string strCon ...

  2. poj2785 简单二分

    4 Values whose Sum is 0 Time Limit: 15000MS   Memory Limit: 228000K Total Submissions: 19243   Accep ...

  3. 转载:CPU的位数和操作系统的位数

    1. 32位系统最大只能使用3.5G的内存,而64位系统最大能够使用128G内存. 2. 32位CPU只能安装和使用32位.16位的系统和软件,无法使用64位系统及软件. 3. 64位可以安装64位系 ...

  4. js过滤emoji表情符号

    手机端常常会遇到用户输入框,输入emoji,如果是数据库是UTF8,会遇到报错:SQLException: Incorrect string value: '\xF0\x9F\x98\x84' for ...

  5. T4 模板自动生成带注释的实体类文件

    T4 模板自动生成带注释的实体类文件 - 只需要一个 SqlSugar.dll 生成实体就是这么简单,只要建一个T4文件和 文件夹里面放一个DLL. 使用T4模板教程 步骤1 创建T4模板 如果你没有 ...

  6. ReactiveCocoa v2.5 源码解析 之 架构总览

    ReactiveCocoa 是一个 iOS 中的函数式响应式编程框架,它受 Functional Reactive Programming 的启发,是 Justin Spahr-Summers 和 J ...

  7. try...catch...finally中try块发生的事件顺序

    1.try块在发生异常的地方中断程序的执行.2.如果有catch块,就检查该块是否匹配已抛出的异常类型.如果没有catch块,就执行finally块(如果没有catch块,就一定要有finally块) ...

  8. DHTMLEdit

    DHTMLEdit   POP3研究了一会,发现如果要写一个类似FOXMAIL的东西,还需要解决一个编辑的问题.以为邮件是支持HTML编辑的. 网上查了一会发现可以使用WINDOWS自带的控件:DHT ...

  9. .Net XML操作 <第二篇>

    一.XML文件操作中与.Net中对应的类 微软的.NET框架在System.xml命名空间提供了一系列的类用于Dom的实现. 以下给出XML文档的组成部分对应.NET中的类: XML文档组成部分 对应 ...

  10. 制作安装包工具NSIS

    NSIS 下载地址: http://nsis.sourceforge.net/Download 编辑工具:NIS Edit 下载地址: http://soft.hao123.com/soft/appi ...