摘录自：http://blog.csdn.net/u010320371/article/details/51104783用户登录

用户名

密码

确认密码

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>jQuery Validation 插件</title>
  6. <link rel="stylesheet" href="style.css"/>
  7. </head>
  8. <body>
  9. <form id="demoForm">
  10. <fieldset>
  11. <legend>用户登录</legend>
  12. <p id="info"></p>
  13. <p>
  14. <label for="username">用户名</label>
  15. <input type="text" id="username" name="username"/>
  16. </p>
  17. <p>
  18. <label for="password">密码</label>
  19. <input type="password" id="password" name="password"/>
  20. </p>
  21. <p>
  22. <label for="confirm-password">确认密码</label>
  23. <input type="password" id="confirm-password" name="confirm-password"/>
  24. </p>
  25. <p>
  26. <input type="submit" value="登录"/>
  27. </p>
  28. </fieldset>
  29. </form>
  30. <script src="vendor/jquery-1.10.0.js"></script>
  31. <script src="vendor/jquery.validate-1.13.1.js"></script>
  32. <script>
  33. var validator1;
  34. $(document).ready(function () {
  35. validator1 = $("#demoForm").validate({
  36. debug: true,
  37. rules: {
  38. username: {
  39. required: true,
  40. minlength: 2,
  41. maxlength: 10
  42. },
  43. password: {
  44. required: true,
  45. minlength: 2,
  46. maxlength: 16
  47. },
  48. "confirm-password": {
  49. equalTo: "#password"
  50. }
  51. },
  52. messages: {
  53. username: {
  54. required: '请输入用户名',
  55. minlength: '用户名不能小于2个字符',
  56. maxlength: '用户名不能超过10个字符',
  57. remote: '用户名不存在'
  58. },
  59. password: {
  60. required: '请输入密码',
  61. minlength: '密码不能小于2个字符',
  62. maxlength: '密码不能超过16个字符'
  63. },
  64. "confirm-password": {
  65. equalTo: "两次输入密码不一致"
  66. }
  67. },
  68. highlight: function(element, errorClass, validClass) {
  69. $(element).addClass(errorClass).removeClass(validClass);
  70. $(element).fadeOut().fadeIn();
  71. },
  72. unhighlight: function(element, errorClass, validClass) {
  73. $(element).removeClass(errorClass).addClass(validClass);
  74. },
  75. submitHandler: function (form) {
  76. console.log($(form).serialize())
  77. }
  78. });
  79. $("#check").click(function () {
  80. console.log($("#demoForm").valid() ? "填写正确" : "填写不正确");
  81. });
  82. });
  83. </script>
  84. </body>
  85. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>jQuery Validation 插件</title>
  6. <link rel="stylesheet" href="style.css"/>
  7. <script src="/Public/js/jquery-1.10.0.js"></script>
  8. <script src="/Public/js/jquery.validate-1.13.1.js"></script>
  9. </head>
  10. <body>
  11. <form id="demoForm">
  12. <fieldset>
  13. <legend>用户登录</legend>
  14. <p id="info"></p>
  15. <p>
  16. <label for="username">用户名</label>
  17. <input type="text" id="username" name="username"/>
  18. </p>
  19. <p>
  20. <label for="password">密码</label>
  21. <input type="password" id="password" name="password"/>
  22. </p>
  23. <p>
  24. <label for="confirm-password">确认密码</label>
  25. <input type="password" id="confirm-password" name="confirm-password"/>
  26. </p>
  27. <p>
  28. <label for="email">邮箱</label>
  29. <input type="text" id="email" name="email"/>
  30. </p>
  31. <p>
  32. <label for="phone">手机</label>
  33. <input type="text" id="phone" name="phone"/>
  34. </p>
  35. <p>
  36. <input type="submit" value="登录"/>
  37. </p>
  38. </fieldset>
  39. </form>
  40. <script>
  41. $(document).ready(function(){
  42. $("#demoForm").validate({
  43. rules:{
  44. username:{
  45. required:true,
  46. minlength:2,
  47. maxlength:10,
  48. },
  49. password:{
  50. required:true,
  51. minlength:2,
  52. maxlength:16,
  53. },
  54. email:{
  55. required:true,
  56. email:true,
  57. },
  58. phone:{
  59. required:true,
  60. rangelength:[11,11],
  61. number:true
  62. },
  63. "confirm-password":{
  64. equalTo:"#password"
  65. }
  66. },
  67. messages:{
  68. username:{
  69. required:'请输入用户名！',
  70. minlength:'最小为两个字符！',
  71. maxlength:'最大为十个字符！'
  72. },
  73. password:{
  74. required:'请输入密码！',
  75. minlength:'最小为两个字符！',
  76. maxlength:'最大为十六个字符！'
  77. },
  78. email:{
  79. required:'邮箱必填！',
  80. email:'email格式填写不正确!'
  81. },
  82. phone:{
  83. required:'请输入手机号码！',
  84. rangelength:'手机号码为11位',
  85. number:'手机号必须为数字'
  86. },
  87. 'confirm-password':{
  88. equalTo:'两次输入密码不一致！'
  89. }
  90. },
  91. submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form
  92. alert("提交表单");
  93. },
  94. });
  95. });
  96. </script>
  97. </body>
  98. </html>

jQuery使用简单示例 validate 插件的更多相关文章

  1. jQuery+pjax简单示例汇总

    pjax 是一个jQuery插件,它使用 ajax 和 pushState 来实现快速的浏览体验,包括真正的固定链接,页面标题和工作返回按钮. ajax缺点是破坏了浏览器的前进后退,因为ajax的请求 ...

  2. C# .net Jquery ajax 简单示例

    jquery中ajax相信大家都不陌生,这里只写个简单例子示意用法,详细后续再写. 在html中按钮事件中添加如下js var param = "data=" + escape($ ...

  3. jquery验证简单示例

    来自<jquery 权威指南> 输入某个字符,选择相应的验证类型,并输出验证结果 ----------------------------------- 效果显示: 详细代码: <! ...

  4. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  5. jQuery Validate 插件

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

  6. JQuery Validate插件与实现

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

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

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

  8. jQuery Validate插件实现表单强大的验证功能

    转自:http://www.jb51.net/article/76595.htm jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自 ...

  9. （转）jquery.validate插件的使用

    JQuery Validate使用总结:一.导入js库<script src="../js/jquery.js" type="text/javascript&quo ...

随机推荐

  1. 三栏布局之 css3 calc和 flex

    圣杯布局的实现,有很多种. 大致都是借助 padding, margin, float之类的,当然这是传统的实现方式.更多的参考方式圣杯布局小结. 这里说的是用css3 cal 和flex来实现,因为 ...

  2. g4e基础篇#3 Git安装与配置

    g4e 是 Git for Enterprise Developer的简写,这个系列文章会统一使用g4e作为标识,便于大家查看和搜索. 章节目录 前言 1. 基础篇: 为什么要使用版本控制系统 Git ...

  3. Spring框架入门之Spring简介

    一.Spring简介(由Rod Johnson创建的一个开源框架)        Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿 ...

  4. MariaDB扩展特性－－虚拟列

    存在于表中的列,它们的值是根据确定的表达式或者是根据表中其他列的值自动计算的. 虚拟列有两种,分别对应了定义虚拟列的修饰关键词: 'VIRTUAL'修饰词含义为该虚拟列的值会在查询的时候计算生成. ' ...

  5. [转载]binlog归档

    1.1. 前言 对数据库数据进行备份都是日常的工作(虽然都是自动做的),备份中有一项必备的那就是binglog了.在工作中一般这些备份都会保留一段时间后归档.时间长了归档的数据将会非常大.这时候我们就 ...

  6. 移动端300ms点击延迟

    移动端300ms点击延迟 原因:早期的苹果手机存在点击缩放,用手指在屏幕上快速双击后,iOS自带的Safari浏览器会将网页缩放至原始比例,后来很多浏览器也跟着学了. 解决方法:禁止缩放 <me ...

  7. 五分钟学习React(三)：纯HTML代码搭建React应用

    上一期我们使用了React官方的脚手架运行React应用.大家可能会觉得这种方法很繁琐,需要配置各种第三方插件.JQuery时代的前端真是让人怀念.这一期,我就带领大家创建一个"怀旧版&qu ...

  8. [整理]vimtutor章节小结

    第一讲小结 1. 光标在屏幕文本中的移动既可以用箭头键,也可以使用 hjkl 字母键. h (左移) j (下行) k (上行) l (右移) 2. 欲进入 Vim 编辑器(从命令行提示符),请输入: ...

  9. Spring Boot修改启动端口

    spring boot是个好东西,可以不用容器直接在main方法中启动,而且无需配置文件,方便快速搭建环境.可是当我们要同时启动2个springboot工程时,就会有问题,有可能会因为8080端口被第 ...

  10. Es6主要特征详解

    一.简介 本文将对es6的最佳特性进行分享和讲解.es6也称ES6/ECMAScript2015,在2015年诞生,但是目前实际开发中还很多用的是ES5(2009年),原因就是很多的浏览器不支持新的语 ...