摘录自：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. vue2.0 配置sass

    一.配置sass依赖 npm install node-sass --save-dev npm install sass-loader --save-dev 二.打开build文件夹下的webpack ...

  2. timeline自适应时间轴

    近期项目一直有类似QQ空间那样的时间轴,来展示公司新闻动态,或者流程之类的设计UI. 每每出现,不以为然,这次总结了下,精简下 ================= ================== ...

  3. eclipse常用快捷设置

    1.代码自动提示 在我们忘记方法名或者想偷懒时,代码自动提示很管用.不过Eclipse默认是输入"."后才会出现包或类成员的提示,也就意味着我们必须先输入一个完整的类名,提示才能出 ...

  4. linux系统编程：IO读写过程的原子性操作实验

    所谓原子性操作指的是:内核保证某系统调用中的所有步骤(操作)作为独立操作而一次性加以执行,其间不会被其他进程或线程所中断. 举个通俗点的例子:你和女朋友OOXX的时候,突然来了个电话,势必会打断你们高 ...

  5. linux centos下安装dokuwiki

    首先先大致介绍一下wiki: DokuWiki是一个开源wiki引擎程序,运行于PHP环境下.Doku Wiki 程序小巧而功能强大.灵活,适合中小团队和个人网站知识库的管理. DokuWiki可以与 ...

  6. JavaScript时间处理插件

    摘要:代码返回的有两种时间格式  一种是///  另外一种是---分割的 两个接收参数的说明 timestr  是接收的时间  mark是格式   默认返回的格式是///   加上-  返回的格式是- ...

  7. 表单验证插件--formvalidation

    表单验证是一个非常基础的功能,当你的表单项少的时候,可以自己写验证,但是当你的表单有很多的时候,就需要一些验证的插件.今天介绍一款很好用的表单验证插件,formvalidation.其前身叫做boot ...

  8. 【AC自动机】Lougu P3796

    题目描述 有NNN个由小写字母组成的模式串以及一个文本串TTT.每个模式串可能会在文本串中出现多次.你需要找出哪些模式串在文本串TTT中出现的次数最多. 输入输出格式 输入格式: 输入含多组数据. 每 ...

  9. 【动态规划】洛谷P1004方格取数

    题目描述 设有N*N的方格图(N<=9),我们将其中的某些方格中填入正整数,而其他的方格中则放 人数字0.如下图所示(见样例): A 0 0 0 0 0 0 0 0 0 0 13 0 0 6 0 ...

  10. [转载]CentOS 7安装Gnome GUI 图形界面

    原文链接:http://www.centoscn.com/image-text/config/2015/0528/5552.html 当你安装centos服务器版本的时候,系统默认是不会安装 Cent ...