1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
  7. <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
  8. <script>
  9. $.validator.setDefaults({
  10.     submitHandler: function() {
  11.       alert("提交事件!");
  12.     }
  13. });
  14. $().ready(function() {
  15. // 在键盘按下并释放及提交后验证提交表单
  16.   $("#signupForm").validate({
  17.         rules: {
  18.           firstname: "required",
  19.           lastname: "required",
  20.           username: {
  21.             required: true,
  22.             minlength: 2
  23.           },
  24.           password: {
  25.             required: true,
  26.             minlength: 5
  27.           },
  28.           confirm_password: {
  29.             required: true,
  30.             minlength: 5,
  31.             equalTo: "#password"
  32.           },
  33.           email: {
  34.             required: true,
  35.             email: true
  36.           },
  37.           "topic[]": {
  38.             required: "#newsletter:checked",
  39.             minlength: 2
  40.           },
  41.           agree: "required"
  42.         },
  43.         messages: {
  44.           firstname: "请输入您的名字",
  45.           lastname: "请输入您的姓氏",
  46.           username: {
  47.             required: "请输入用户名",
  48.             minlength: "用户名必需由两个字母组成"
  49.           },
  50.           password: {
  51.             required: "请输入密码",
  52.             minlength: "密码长度不能小于 5 个字母"
  53.           },
  54.           confirm_password: {
  55.             required: "请输入密码",
  56.             minlength: "密码长度不能小于 5 个字母",
  57.             equalTo: "两次密码输入不一致"
  58.           },
  59.           email: "请输入一个正确的邮箱",
  60.           agree: "请接受我们的声明",
  61.           topic: "请选择两个主题"
  62.         }
  63.     });
  64. });
  65. </script>
  66. <style>
  67. .error{
  68.     color:red;
  69. }
  70. </style>
  71. </head>
  72. <body>
  73. <form class="cmxform" id="signupForm" method="get" action="">
  74.   <fieldset>
  75.     <legend>验证完整的表单</legend>
  76.     <p>
  77.       <label for="firstname">名字</label>
  78.       <input id="firstname" name="firstname" type="text">
  79.     </p>
  80.     <p>
  81.       <label for="lastname">姓氏</label>
  82.       <input id="lastname" name="lastname" type="text">
  83.     </p>
  84.     <p>
  85.       <label for="username">用户名</label>
  86.       <input id="username" name="username" type="text">
  87.     </p>
  88.     <p>
  89.       <label for="password">密码</label>
  90.       <input id="password" name="password" type="password">
  91.     </p>
  92.     <p>
  93.       <label for="confirm_password">验证密码</label>
  94.       <input id="confirm_password" name="confirm_password" type="password">
  95.     </p>
  96.     <p>
  97.       <label for="email">Email</label>
  98.       <input id="email" name="email" type="email">
  99.     </p>
  100.     <p>
  101.       <label for="agree">请同意我们的声明</label>
  102.       <input type="checkbox" class="checkbox" id="agree" name="agree">
  103.     </p>
  104.     <p>
  105.       <label for="newsletter">我乐意接收新信息</label>
  106.       <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
  107.     </p>
  108.     <fieldset id="newsletter_topics">
  109.       <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
  110.       <label for="topic_marketflash">
  111.         <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash
  112.       </label>
  113.       <label for="topic_fuzz">
  114.         <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz
  115.       </label>
  116.       <label for="topic_digester">
  117.         <input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester
  118.       </label>
  119.       <label for="topic" class="error" style="display:none">至少选择两个</label>
  120.     </fieldset>
  121.     <p>
  122.       <input class="submit" type="submit" value="提交">
  123.     </p>
  124.   </fieldset>
  125. </form>
  126. </body>
  127. </html>

jquery validation表单验证插件2。的更多相关文章

  1. jquery validation表单验证插件。

    这个是刚学的,觉得对以后挺有用的,就想把自己所学的分享一下. 校验规则: (1)required:true 必输字段 (2)number:true 必须输入合法的数字(负数,小数) (3)digits ...

  2. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  3. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  4. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  5. jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  6. jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

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

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

  8. jquery validate表单验证插件

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

  9. jQuery Validate 表单验证插件----自定义一个验证方法

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

随机推荐

  1. 【数组】Maximum Subarray

    题目: Find the contiguous subarray within an array (containing at least one number) which has the larg ...

  2. excel将内容粘贴到筛选后的可见单元格

    默认情况下,筛选后excel表格进行复制粘贴,会贴到隐藏的表格. 可以添加两个辅助列来完成操作:1.在筛选前在表格右边添加"辅助1"列,在第二行输入1,按Ctrl+鼠标左键往下拉到 ...

  3. 带你了解数据库中事务的ACID特性

    前言 前面我们介绍过数据库中 带你了解数据库中JOIN的用法 与 带你了解数据库中group by的用法的相关用法.本章节主要来介绍下数据库中一个非常重要的知识点事务,也是我们项目中或面试中经常会遇到 ...

  4. 一条命令在Centos7中换163 yum源、安装python3并与python2共存、使用豆瓣pip源加速

    打开一个Terminal: 换yum源: mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup & ...

  5. windows下mysql配置，my.ini配置文件

    基本配置,这个配置可以直接复制到mysql根目录下了my.ini文件中, [client] port=3306 [mysql] no-beep # default-character-set= [my ...

  6. caffe, caffe2, paddlepaddle, tensorflow对于cuda,cudnn,protobuf依赖的纠葛

    由于在学习神经网络,为了尝试各种深度学习框架,电脑上目前安装了caffe, caffe2, paddlepaddle, tensorflow三款主流框架,但是安装过程中真是痛不欲生. 且不说单单安装一 ...

  7. j2ee高级开发技术课程第二周(web请求的整个过程、XML)

    博客非原创,只是收集整理了一下网上的一些文章 一.web请求的整个过程 1)把URL分割成几个部分:协议.网络地址.资源路径.其中网络地址指示该连接网络上哪一台计算机,可以是域名或者IP地址,可以包括 ...

  8. Nodejs学习笔记（二）—事件模块

    一.简介及资料  http://nodejs.org/api/events.html  http://www.infoq.com/cn/articles/tyq-nodejs-event events ...

  9. kendo UI 入门

    Kendo UI 是一套前端开发宽假,意为日本的“剑道” 首先到官方网站下载最新的30天试用版,地址为:http://www.telerik.com/download/kendo-ui 需要简单注册一 ...

  10. chrome和IE下的滚动条样式修改

    火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html&g ...