转自:http://www.jb51.net/article/76595.htm

jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。

第一节:jQuery Validation让验证变得如此容易

一、官网下载jquery,和jquery validation plugin 
二、引入文件

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="js/jquery.validate.js" type="text/javascript"></script>
三、接下来,声明下面的HTML片段
<form action="" id="jvForm">
 姓名:<input type="text" name="username" id="username" class="required" /></br>
 密码:<input type="password" name="password" id="password" class="required"/></br>
 <input type="submit" value="提交" />
</form>
通过以上代码,大家会发现我们对于每一个input都加上了class="required" 
他的作用就是在这个inpute标签为空时会提示用户出错。
四、最后我们要为我们的框架找到一个切入点
<script type="text/javascript">
 $(function() {
  $("#jvForm").validate();
 })
</script>
运行效果:
当然提示信息默认是英文的,可根据需要在jquery.validate.js里修改。
 

第二节:jQuery Validation让验证变得如此容易

上一个例子我们是统一引用jquery.validate.js这样所有必填字段的提示信息都将是This field is required.
现在要改成动态提示,比如姓名如果为空则提示姓名不能为空,密码如果为空则提示密码不能为空。
这次我们将校验规则写在代码里
首先还是先引入文件

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
接下来,声明下面的HTML片段
<form action="" id="jvForm">
 姓名:<input type="text" name="username" id="username" /></br>
 密码:<input type="password" name="password" id="password" /></br>
 <input type="submit" value="提交" />
</form>
和之前的相比没有了class="required"
最后 校验规则如下:
$(function() {
 $("#jvForm").validate({
  rules: {
   username: {
    required: true
   },
   password: {
    required: true
   }
  },
  messages: {
   username: {
    required: "姓名不能为空!"
   },
   password: {
    required: "密码不能为空!"
   }
  }
 });
})
 运行效果:

第三节:jQuery Validation让验证变得如此容易

以下代码进行对jQuery Validation的简单演示包括必填项、字符长度,格式验证

一、引入文件

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
二、声明HTML片段
<form action="" id="jvForm">
  用 户 名:<input type="text" name="username"/></br>
  密 码:<input type="password" name="password" id="password"/></br>
  确认密码:<input type="password" name="confirm_password"/></br>
  出 生 地:<select name="address"><option value="">--</option><option value="1">北京</option>
 <option value="1">上海</option><option value="1">深圳</option></select></br>
  手 机:<input type="text" name="mobile" /></br>
  邮 箱:<input type="text" name="email" /></br>
  <input type="submit" value="提交" />
</form>
三、错误提示样式
<style type="text/css">
 label.error{font-size:12px;font-weight: normal;color:#ff0511;margin-left:10px;}
</style>
四、验证代码
<script type = "text/javascript">
$(function() {
 $("#jvForm").validate({
  rules: {
   username: { //用户名必填 至少3位
    required: true,
    minlength: 3
   },
   password: { //密码必填 至少6位
    required: true,
    minlength: 6
   },
   confirm_password: { //密码确认
    required: true,
    equalTo: "#password"
   },
   address: { //出生地必填
    required: true
   },
   mobile: { //手机必填 验证格式
    required: true,
    mobile: true
   },
   email: { //email必填 验证格式
    required: true,
    email: true
   },
  
  },
  messages: {
   username: {
    required: "用户名不能为空!",
    minlength: "用户名至少三位!"
   },
   password: {
    required: "密码不能为空!",
    minlength: "密码至少六位!"
   },
   confirm_password: {
    required: "密码确认不能为空!",
    equalTo: "两次输入密码不一致 !"
   },
   address: {
    required: "请选择出生地!",
   },
   mobile: {
    required: "手机不能为空!",
    mobile: "手机格式不正确",
   },
   email: {
    required: "邮箱不能为空!",
    email: "邮箱格式不正确",
   },
  }
 });
})
</script>
运行效果:
 

jQuery Validate插件实现表单强大的验证功能的更多相关文章

  1. jQuery Validate 插件为表单提供了强大的验证功能

    之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...

  2. validate插件实现表单效验(二)

    一款优秀的表单验证插件——validation插件 特点: l  内置验证规则:拥有必填.数字.email.url和信用卡号码等19类内置验证规则 l  自定义验证规则:可以很方便的自定义验证规则 l ...

  3. jquery validate 一个注册表单的应用

    先看页面 前端表单代码  register.html <form class="mui-input-group" id="regForm"> < ...

  4. 表单提交学习笔记(二)—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  5. jquery.validate.js自定义表单验证

    $(document).ready(function() { //在下列位置输入页面加载的逻辑代码 $("#inputForm").validate({ rules: { seq: ...

  6. validate插件实现表单效验(一)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. [转]jQuery.validate插件在失去焦点时执行验证代码

    转:http://my.oschina.net/enyo/blog/311566 关于 jquery.validate.js 表单验证插件如何在失去焦点时做验证.看手册后发现默认是在表单提交时执行验证 ...

  8. jQuery html5Validate基于HTML5表单 异步服务器端验证

    1. HTML5 自带的Validate 很漂亮,很好用, 但是一定要在form里用submit按钮,才生效 <form id="frmInfo" action=" ...

  9. jquery.form插件 提交表单 type="hidden"取不到值的问题记录

    1.外国文献:说可以改成其他的(非hidden),再加style="display:none"隐藏. <INPUT type="password" sty ...

随机推荐

  1. document.write() 和 document.writeln区别

    document.write() 和 document.writeln 都是JavaScript向客户端写入的方法,writeln是以行方式输出的,但并不是指页面实际效果中的换行,两种方法在查看源代码 ...

  2. JAVA基础——链表结构之双端链表

    双端链表:双端链表与传统链表非常相似.只是新增了一个属性-即对最后一个链结点的引用 如上图所示:由于有着对最后一个链结点的直接引用.所以双端链表比传统链表在某些方面要方便.比如在尾部插入一个链结点.双 ...

  3. 洛谷——P3946 ことりのおやつ(小鸟的点心)

    P3946 ことりのおやつ(小鸟的点心) 题目太长,请去链接里看吧 注意细节:特判终点(即使困住又能怎样,到达就好了),特判高度 #include<bits/stdc++.h> #defi ...

  4. Cash Machine POJ - 1276

    解法 多重背包板子题 多重背包板子 如果上限的体积大于了给定的体积那么套完全背包 否则二进制优化成01背包 代码 #include <iostream> #include <cstr ...

  5. Semi-colon expected (eclipse 引入 json文件报错)

    最近做的项目用到的前端框架有一个json文件夹,里面全是json文件,所以导入Eclipse的时候会在整个项目上都是红叉,但是其实不影响项目运行的,之前忙着码代码也没时间管他,这个红叉存留了一个月!今 ...

  6. 53.doc value机制内核级原理深入探秘

    主要知识点: doc value的原理 doc value性能优化     一.doc value原理     1. 生成时间:index-time生成     PUT/POST的时候,就会生成doc ...

  7. JavaSE 学习笔记之新特性之泛型(二十)

    泛型:jdk1.5版本以后出现的一个安全机制.表现格式:< > 好处: 1:将运行时期的问题ClassCastException问题转换成了编译失败,体现在编译时期,程序员就可以解决问题. ...

  8. [luoguP2854] [USACO06DEC]牛的过山车Cow Roller Coaster(DP + sort)

    传送门 先按照起点 sort 一遍. 这样每一个点的只由前面的点决定. f[i][j] 表示终点为 i,花费 j 的最优解 状态转移就是一个01背包. ——代码 #include <cstdio ...

  9. OSX: node中安装zeromq

    1. brew install pkg-config2. brew install zmq3. export PKG_CONFIG_PATH="/usr/local/lib/pkgconfi ...

  10. jquery simple modal

    窗体API定义丰富,而且使用也很容易上手.官方地址:http://www.ericmmartin.com/projects/simplemodal/从官方下载插件,在文件中引用<script t ...