摘录自：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. vue：简单方法替代vuex或者bus

    兄弟组件,隔代组件传值很麻烦,方法虽然多,但都各有缺点. vuex: 适合数据量大,并且函数集中处理. bus:适合数据虽少,却不得不用的时候,维护困难. root:这儿指将值挂在root组件上,需要 ...

  2. 深入理解cookie和session

    cookie和session在java web开发中扮演了十分重要的作用,本篇文章对其中的重要知识点做一些探究和总结. 1.cookie存在于浏览器 随意打开一个网址,用火狐的调试工具,随意选取一个链 ...

  3. C#设计模式之一单例模式（Singleton Pattern）【创建型】

    一.引言     看了李建忠老师的讲的设计模式已经有一段时间了(这段时间大概有一年多了),自己还没有写过自己的.有关设计模式的文章.这次想写一些关于设计模式的文章,用自己的理解和代码来写,算是复习一遍 ...

  4. php接口interface的使用

    接口是什么? 使用接口(interface),可以指定某个类必须实现哪些方法,但不需要定义这些方法的具体内容. 接口是通过 interface 关键字来定义的,就像定义一个标准的类一样,但其中定义所有 ...

  5. 第七章：Python基础のXML操作和面向对象(一)

    本課主題 XML介绍与操作实战 shutil 模块介绍与操作实战 subprocess 模块介绍与操作实战 初探面向对象与操作实战 本周作业 XML介绍和操作实战 對於浏览器返回的字符串有以下幾種: ...

  6. PHP读取excel中地址实现多文件下载

    PHP文件下载有单文件和多文件之分,如果是单文件写个方法可以实现,但是如果想循环下载多个文件我试验是没有成功.先说单文件的下载,方法如下: function downfile($fileurl) { ...

  7. windows虚拟内存管理

    内存管理是操作系统非常重要的部分,处理器每一次的升级都会给内存管理方式带来巨大的变化,向早期的8086cpu的分段式管理,到后来的80x86 系列的32位cpu推出的保护模式和段页式管理.在应用程序中 ...

  8. 浮动（float）与清除浮动（clear）

    上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮 ...

  9. [已解决]IndentationError: unindent does not match any outer indentation level

    最近跟同事合作代码没有用git进行协同,很多代码拷贝后进行粘贴,常常报以上错误. 经过查询发现是空格跟tab混合使用了,重新将代码的缩进手动调整下就好了.

  10. TLD算法概述--学习理解之（一）

    liuyihai@126.com http://www.cnblogs.com/liuyihai/ TLD(Tracking-Learning-Detection)是英国萨里大学的一个捷克籍博士生Zd ...