<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

<script>

$.validator.setDefaults({

    submitHandler: function() {

      alert("提交事件!");

    }

});

$().ready(function() {

// 在键盘按下并释放及提交后验证提交表单

  $("#signupForm").validate({

        rules: {

          firstname: "required",

          lastname: "required",

          username: {

            required: true,

            minlength: 2

          },

          password: {

            required: true,

            minlength: 5

          },

          confirm_password: {

            required: true,

            minlength: 5,

            equalTo: "#password"

          },

          email: {

            required: true,

            email: true

          },

          "topic[]": {

            required: "#newsletter:checked",

            minlength: 2

          },

          agree: "required"

        },

        messages: {

          firstname: "请输入您的名字",

          lastname: "请输入您的姓氏",

          username: {

            required: "请输入用户名",

            minlength: "用户名必需由两个字母组成"

          },

          password: {

            required: "请输入密码",

            minlength: "密码长度不能小于 5 个字母"

          },

          confirm_password: {

            required: "请输入密码",

            minlength: "密码长度不能小于 5 个字母",

            equalTo: "两次密码输入不一致"

          },

          email: "请输入一个正确的邮箱",

          agree: "请接受我们的声明",

          topic: "请选择两个主题"

        }

    });

});

</script>

<style>

.error{

    color:red;

}

</style>

</head>

<body>

<form class="cmxform" id="signupForm" method="get" action="">

  <fieldset>

    <legend>验证完整的表单</legend>

    <p>

      <label for="firstname">名字</label>

      <input id="firstname" name="firstname" type="text">

    </p>

    <p>

      <label for="lastname">姓氏</label>

      <input id="lastname" name="lastname" type="text">

    </p>

    <p>

      <label for="username">用户名</label>

      <input id="username" name="username" type="text">

    </p>

    <p>

      <label for="password">密码</label>

      <input id="password" name="password" type="password">

    </p>

    <p>

      <label for="confirm_password">验证密码</label>

      <input id="confirm_password" name="confirm_password" type="password">

    </p>

    <p>

      <label for="email">Email</label>

      <input id="email" name="email" type="email">

    </p>

    <p>

      <label for="agree">请同意我们的声明</label>

      <input type="checkbox" class="checkbox" id="agree" name="agree">

    </p>

    <p>

      <label for="newsletter">我乐意接收新信息</label>

      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">

    </p>

    <fieldset id="newsletter_topics">

      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>

      <label for="topic_marketflash">

        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash

      </label>

      <label for="topic_fuzz">

        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz

      </label>

      <label for="topic_digester">

        <input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester

      </label>

      <label for="topic" class="error" style="display:none">至少选择两个</label>

    </fieldset>

    <p>

      <input class="submit" type="submit" value="提交">

    </p>

  </fieldset>

</form>

</body>

</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. .gitignore释疑

    自己总结: *.a--匹配任意路径下的.a文件 a/--匹配任意路径下的a文件夹 a/*--匹配根目录下的文件夹a下的任意文件(等同于 /a/* 或 /a/)  ----一般情况下不会有这种写法 /a ...

  2. MySQL命令行导入导出数据

    参考:http://www.cnblogs.com/xcxc/archive/2013/01/30/2882840.html 这篇文章写得非常好,又简洁,而且深入浅出,排版也非常好看,不会像网上的只是 ...

  3. 自己实现一个双向绑定的Vue

    我们知道双向绑定是Vue的核心之一,接下来我们自己仿照Vue实现一个基本的功能. 项目代码在GitHub上: https://github.com/zhangKunUserGit/zk-vue

  4. Abp中SwaggerUI的接口文档添加上传文件参数类型

    在使用Swashbuckle上传文件的时候,在接口文档中希望看到上传控件,但是C#中,没有FromBodyAttribute这个特性,所以需要在运行时,修改参数的swagger属性.   首先看下,最 ...

  5. CSS3 颜色属性

    关键字颜色 red 十六进制颜色 #FF0000 RGB颜色   rgb(255,0,0) 新增的颜色表示方法 RGBa: RGB代表光的三原色,Red.Green和Blue CSS3中可以增加一个值 ...

  6. 【JavaScript 从零开始】 原始值和对象引用、类型转换

    JavaScript 中的原始值(undefined.null . 布尔值.数值和字符串)于对象(包括数组和函数)有着根本区别. 原始值是不可更改的:任何方法都无法改变(或“突变”)一个原始值. 对于 ...

  7. SpringMVC 工作原理详解

    本文Github开源项目https://github.com/Snailclimb/JavaGuide,只供自己学习总结无商业用途,如有侵权,联系删除 先来看一下什么是 MVC 模式 MVC 是一种设 ...

  8. 装饰器模式（Decorator Pattern）

    装饰器模式 一.什么是装饰器模式   装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构.这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装 ...

  9. MyBatis中的条件查询（动态sql）

    本文将介绍使用MyBatis框架,编写DAO层接口类和接口类对应的sql映射文件,使用动态sql查询满足条件的用户集合. 首先,需要创建一个实体类User,供封装数据使用: package com.x ...

  10. Spring系列之——Spring事务以及两大核心IOC和AOP

    1 Spring事务 1.1 Spring事务是什么(百度) 事务是对一系列的数据库操作(比如插入多条数据)进行统一的提交或是回滚操作,如果插入成功,那么一起成功,如果中间一条出现异常,那么回滚之前的 ...