1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>validate插件</title>
  6.     <script type="text/javascript" src="jquery-3.2.1.js"></script>
  7.     <script type="text/javascript" src="jquery.validate.js"></script>
  8.     <script type="text/javascript" src="messages_zh.js"></script>
  9.     <script>
  10.  
  11. $().ready(function() {
  12.  $("#signupForm").validate({
  13.         rules: {
  14.           firstname: "required",
  15.           lastname: "required",
  16.           username: {
  17.             required: true,
  18.             minlength: 2
  19.           },
  20.           password: {
  21.             required: true,
  22.             minlength: 5
  23.           },
  24.           confirm_password: {
  25.             required: true,
  26.             minlength: 5,
  27.             equalTo: "#password"
  28.           },
  29.           email: {
  30.             required: true,
  31.             email: true
  32.           },
  33.  
  34.           agree: "required"
  35.         },
  36.         messages: {
  37.           firstname: "请输入您的名字",
  38.           lastname: "请输入您的姓氏",
  39.           username: {
  40.             required: "请输入用户名",
  41.             minlength: "用户名必需由两个字母组成"
  42.           },
  43.           password: {
  44.             required: "请输入密码",
  45.             minlength: "密码长度不能小于 5 个字母"
  46.           },
  47.           confirm_password: {
  48.             required: "请输入密码",
  49.             minlength: "密码长度不能小于 5 个字母",
  50.             equalTo: "两次密码输入不一致"
  51.           },
  52.           email: "请输入一个正确的邮箱",
  53.           agree: "请接受我们的声明",
  54.  
  55.         }
  56.     });
  57. });
  58. </script>
  59. <style>
  60. .error{
  61.     color:red;
  62. }
  63. </style>
  64. </head>
  65. <body>
  66. <form class="cmxform" id="signupForm" method="get" action="">
  67.   <fieldset>
  68.     <legend>验证完整的表单</legend>
  69.     <p>
  70.       <label for="firstname">名字</label>
  71.       <input id="firstname" name="firstname" type="text">
  72.     </p>
  73.     <p>
  74.       <label for="lastname">姓氏</label>
  75.       <input id="lastname" name="lastname" type="text">
  76.     </p>
  77.     <p>
  78.       <label for="username">用户名</label>
  79.       <input id="username" name="username" type="text">
  80.     </p>
  81.     <p>
  82.       <label for="password">密码</label>
  83.       <input id="password" name="password" type="password">
  84.     </p>
  85.     <p>
  86.       <label for="confirm_password">验证密码</label>
  87.       <input id="confirm_password" name="confirm_password" type="password">
  88.     </p>
  89.     <p>
  90.       <label for="email">Email</label>
  91.       <input id="email" name="email" type="email">
  92.     </p>
  93.     <p>
  94.       <label for="agree">请同意我们的声明</label>
  95.       <input type="checkbox" class="checkbox" id="agree" name="agree">
  96.     </p>
  97.     <p>
  98.       <input class="submit" type="submit" value="提交">
  99.     </p>
  100.   </fieldset>
  101. </form>
  102. </body>
  103. </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. Lambda获取类属性的名字

    using System; using System.ComponentModel; using System.Linq.Expressions; using System.Reflection; p ...

  2. ASP.NET Core 3.1 中间件

    参考微软官方文档 : https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/middleware/?view=aspnetcore-3.1 ...

  3. 【C++】《Effective C++》第四章

    第四章 设计与声明 条款18:让接口容易被正确使用,不易被误用 请记住 好的接口很容易被正确使用,不容易被误用.你应该在你的所有接口中努力达到这些性质. "促进正确使用"的办法包括 ...

  4. FAT32、NTFS、exFAT有什么区别？

    文件系统 我们经常会对电脑硬盘.U盘.移动硬盘进行格式化,而在格式化硬盘的时候会弹出文件系统的选项,分别有FAT32.NTFS.exFAT三种格式,那么FAT32.NTFS.exFAT有什么区别? 在 ...

  5. 【栈和队列】5、队列概述与数组队列的基本实现 - Java

    3-5 数组队列 简单记录 - bobo老师的玩转算法系列–玩转数据结构 - 栈和队列 队列Queue 队列也是一种线性结构 相比数组,队列对应的操作是数组的子集 只能从一端(队尾)添加元素,只能从另 ...

  6. 记汉化zabbix后图形界面没有任何汉字的问题

    1.安装并汉化后zabbix,所有的图形界面都没有任何字图,如下图 2.郁闷不已,去/var/www/html/zabbix/fonts目录下面查看,发现之前上传字体的文件名后缀是.ttc,猜着一般见 ...

  7. linux7下修改主机名的方式

    在基于linux发行版的众多linux kernel 3.0以上,包括rhel7,centos7等提供多种修改linux主机名的方式 1.通过编辑/etc/hostname文件 2.命令hostnam ...

  8. ichartjs测试dome分享

    效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> ...

  9. Py编程方法，尾递归优化，map函数，filter函数，reduce函数

    函数式编程 1.面向过程 把大的问题分解成流程,按照流程来编写过程 2.面向函数 面向函数编程=编程语言定义的函数+数学意义上的函数先弄出数学意义上的方程式,再用编程方法编写这个数学方程式注意面向函数 ...

  10. 面试必问：如何实现Redis分布式锁

    摘要:今天我们来聊聊分布式锁这块知识,具体的来看看Redis分布式锁的实现原理. 一.写在前面 现在面试,一般都会聊聊分布式系统这块的东西.通常面试官都会从服务框架(Spring Cloud.Dubb ...