<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>validate插件</title>

    <script type="text/javascript" src="jquery-3.2.1.js"></script>

    <script type="text/javascript" src="jquery.validate.js"></script>

    <script type="text/javascript" src="messages_zh.js"></script>

    <script>

$().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

          },

          agree: "required"

        },

        messages: {

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

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

          username: {

            required: "请输入用户名",

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

          },

          password: {

            required: "请输入密码",

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

          },

          confirm_password: {

            required: "请输入密码",

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

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

          },

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

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

        }

    });

});

</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>

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

    </p>

  </fieldset>

</form>

</body>

</html>

validate插件的更多相关文章

  1. validate插件深入学习-01 小白从看透一个插件开始

    没有编程基础的的我,即使看了一遍jq文档也不知道怎么写程序,一个新的插件看了也不知道怎么用. 总是想做自己会的,自己不会的永远不去触碰,就永远不会. 都说编程这东西,很多都有很像的地方了,一个语言学通 ...

  2. jquery.validate插件在booststarp中的运用

    现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...

  3. jQuery Validate 插件[表单验证 属性介绍]

    详细介绍一下Validate插件 $("#form的Id").validate({ }) 属性 规则 描述 required:true 必须输入的字段 required: &quo ...

  4. jQuery Validate 插件

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  5. jquery validate 插件使用小结

    项目中整合了jquery validate插件,仿照别人的使用写了我的表单验证,结果不起作用.然后就各种找原因. 在网上下了jquery validate插件的完整包,看了看里边的例子,跟我的使用貌似 ...

  6. 【jQuery】(6)---jQuery validate插件

    jQuery  validate插件 一.导入js库                                      先导入jQuery库,然后导入Validate插件,如果是中文提示还需要 ...

  7. jQuery validate插件，自动验证无效的原因及解决方法归纳

    最近在使用validate插件进行验证的时候,出现有的控件在个别事件(比如keydown.foucs.onchange等)下不能自动验证,而有的控件却又正常,当时觉得很诡异,后来仔细测试查看,归纳原因 ...

  8. JQuery Validate插件与实现

    菜鸟拙见,望请纠正 一:效果展示:以下是两个注册表单验证,左边使用Jquery validate插件实现,右边是自己用JQuery实现,效果差不多,但个人推荐用插件,毕竟前人栽了树而且长大了后人当然好 ...

  9. validate插件使用

    validate插件使用 官网:http://jqueryvalidation.org/ 项目实操 引入文件 add.html调用(注意顺序问题) 为form表单定义一个ID,以方便获取该元素 添加验 ...

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

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

随机推荐

  1. [Java基础]——String类

    此篇博客主要整理Java中的String类的使用. 一.String    1.1  String 的定义 上图是jdk中对String类的定义,得到的信息有: ①.String类声明为final的, ...

  2. PHP 判断手机端还是web端

    function isMobile(){ // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) re ...

  3. 【Redis3.0.x】配置文件

    Redis3.0.x 配置文件 概述 Redis 的配置文件位于Redis安装目录下,文件名为 redis.conf. 可以通过 CONFIG 命令查看或设置配置项. Redis 命令不区分大小写. ...

  4. 【Sphinx】 为Python自动生成文档

    sphinx 前言 Sphinx是一个可以用于Python的自动文档生成工具,可以自动的把docstring转换为文档,并支持多种输出格式包括html,latex,pdf等 开始 建一个存放文档的do ...

  5. Redis 设计与实现 10：五大数据类型之有序集合

    有序集合 sorted set (下面我们叫zset 吧) 有两种编码方式:压缩列表 ziplist 和跳表 skiplist. 编码一:ziplist zset 在 ziplist 中,成员(mem ...

  6. 通用寄存器_MOV_ADD_SUB_AND_OR_NOT

    通用寄存器 MOV指令 注意:目标操作数与操作数宽度必须一样 MOV 目标操作数,源操作数 作用:拷贝源操作数到目标操作数 1.源操作数可以是立即数.通用寄存器.段寄存器.或者内存单元. 2.目标操作 ...

  7. Python利用最优化算法求解投资内部收益率IRR【一】

    一. 内部收益率和净现值 内部收益率(Internal Rate of Return, IRR)其实要和净现值(Net Present Value, NPV)结合起来讲.净现值指的是某个投资项目给公司 ...

  8. MSDOS（MBR）和GPT磁盘分区表

    MBR和GPT分区 MBR分区:以磁盘的第一个扇区(512byte)记录分区表,其中,446byte存储开机管理程序(MBR 主要开机记录),64byte用于存放分区表 分区实际上是对分区表的修改 M ...

  9. Ubuntu Terminal命令行新建仓库并推送到远程仓库

    通常情况下,在本地新建一个仓库之后,需要在远端网页端也新建一个空的同名仓库,然后将两者进行关联才能推送. 那有没有办法直接在命令行就完成从新建到推送的过程而不需要中间在网页端也操作一番呢?办法当然是有 ...

  10. Ice系列--强大如我IceGrid

    前言 IceGrid是一个提供服务定位和服务激活的组件,但它的功能远不止于此.从它的命名可以看出它的设计理念-网格计算(grid computing).网格计算被定义为由一系列关联的廉价计算机组成的计 ...