在页面上面引用

<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. eclipse控制台中文乱码解决方法

    一.全局设置 1.Window > Preferences 2.General > Workspace > Text file encoding. 3.选择 Other 4.手工输入 ...

  2. Java-->打包发送信息(UDP协议)

    --> 好像UDP 协议没有TCP 协议应用得那么广泛 --> UdpSender 类定义一个发送端(快递公司) package com.dragon.java.udpdatagram; ...

  3. Windows2003操作系统SQL Server 2008安装图解(详细)

    最近不少用户在windows2003 server 32位操作系统上安装SQL Server2008总是失败,出现大量错误.今天经过通过我反复测试安装,找出了一个便捷的安装方法,节省大家宝贵时间,具体 ...

  4. 【HDOJ】1561 The more, The Better

    树状DP. /* 1561 */ #include <iostream> #include <cstdio> #include <cstring> #include ...

  5. canvas元素

    一.canvas元素的基础知识 canvas元素是html5中新增的一个重要的元素,专门用来绘制图形.在页面上放置了一个canvas元素,就相当于在页面上放置了一块"画布",可以在 ...

  6. commons-httpclient 实现get和post请求

    引入的jar包为: <!-- https://mvnrepository.com/artifact/commons-httpclient/commons-httpclient --> &l ...

  7. weblogic获取应用目录路径(war包)

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...

  8. IDEA之Git分支以及Stash使用

    访问我的博客 随着公司开发人员的增加,以及多需求的并行开发,功能上线就会碍手碍脚:害怕自己没写完的代码被别人部署到线上,害怕别人代码没写完被自己部署到线上:总之功能上线之前还要和所有开发沟通,能不能部 ...

  9. C借函数指针构造映射

    这是候老师的<深入浅出 MFC>中C借函数指针构造映射截图,可以看到MFC们的映射思想:

  10. jQuery队列(二)

    继续阅读队列提供的方法. jQuery.extend({    queue: function( elem, type, data ) {}, // 将data按照某种类型存储到elem对应的队列中, ...