<!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. Laya Ts 简易对象池

    ts版本的简易对象池 ,目前主要支持3D的物体,也可以将其改成其他类型 要使用首先调用InitPool 方法 `/* 使用说明: 使用必须先调用 InitPool 方法将对象池初始化 然后 Deque ...

  2. Selenium WebDriver 定位之Xpath定位

    Selenium 定位之Xpath定位: 1.绝对路径定位:以/开头从根节点一直找到当前节点,不推荐使用决定路径定位方式 2.相对路径定位:使用"//"表示相对路径定位,格式:// ...

  3. 【Shell】使用awk sed获取一行内容的两个值

    突然有需求需要一个脚本,同时获取到每一行数据的两个值,下面做了一个例子模板,仅供记录参考 cat test.txt  id=1,name=zclinux1 id=2,name=zclinux2 id= ...

  4. 【Oracle】增量备份和全库备份怎么恢复数据库

    1差异增量实验示例 1.1差异增量备份 为了演示增量备份的效果,我们在执行一次0级别的备份后,对数据库进行一些改变. 再执行一次1级别的差异增量备份: 执行完1级别的备份后再次对数据库进行更改: 再执 ...

  5. 误删数据库怎么办？mysql 回滚，撤销操作，恢复数据

    刚刚不小心把数据库删掉了,于是想着上网上找找有没有可以恢复数据库的方法,没想到还真有,除了备份以外,还有以下方法. 在mysql有时执行了错误的update或者delete时导致大量数据错误恢复的办法 ...

  6. oracle编译表上失效USERDBY脚本

    对表进行DLL操作之后,依赖这个表的一些存储过程,触发器等会失效,可以用下边的脚本进行重编译 /* Formatted on 2020/7/8 上午 09:31:31 (QP5 v5.163.1008 ...

  7. 安装python性能检测工具line_profiler

    line_profiler是一款监测python的CPU密集型性能问题的强大工具,可以对函数进行逐行分析,在linux上安装时一切正常,然而今天在win10 64位系统安装失败了 pip3 insta ...

  8. SAP GUI用颜色区分不同的系统

    对于经常打开多个窗口的SAP用户,有时候可能同时登录了生产机.测试机和开发机,为了避免误操作,比如在测试要执行的操作,结果在生产机做了,结果可想而知. 虽然可以通过右下角查看再去判断,但是总是没有通过 ...

  9. HTML基础复习2

    6.表格 6.1建立表格: 表格由<table></table>标签来定义 每行由<tr></tr>来定义,每行被分割为若干单元格,由<td> ...

  10. python Mysql 多条件查询

    做项目时,遇到一场景,前端至少传入一个参数,最多传入四个参数,根据单参数或者组合参数,从数据库筛选数据. 作为一个小白,思考之,从数学的角度,\(C_4^1 + C_4^2+C_4^3+C_4^4=1 ...