摘录自：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. Intellij idea破解办法

    最开始的时候intellij用得是社区版,专业版是要钱的.但是社区版的功能确实弱了很多:比如Diagrams功能就没有,比如社区版不支持web项目,想起个tomcat跑个web项目都没法搞.于是,重新 ...

  2. SQL SERVER 审核

    USE master CREATE SERVER AUDIT audit1 TO FILE (FILEPATH='E:\SQLAudit') USE  TEST CREATE DATABASE AUD ...

  3. sql server 错误号大全

    0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒绝访问. 6 句柄无效. 7 存储控制块被损坏. 8 存储空间不足,无法处理此 ...

  4. 第十五章：Python の Web开发基础 (二) JavaScript与DOM

    本課主題 JavaScript 介绍 DOM 介绍 JavaScript 介绍 JavaScript 是一门编程语言,它可以让网页动起来的,JavaScript 的变量有两种,一个是局部变量:一个是全 ...

  5. linux下分割文件

    split -l 115 XSMD.txt -d -a 2 XSMD.txt._   注:将一个文件XSMD.txt分割成两个文件,每个大小115

  6. Factom(公证通)--基于区块链的存证系统

    Factom这个Solution在2014年的时候就已经推出了,现在已经2018年了,我才来写这一篇分析文章可能有些迟了,但是它是十分具有参考价值的.因为现阶段来开区块链虽然炒得火热--养猫.养狗.草 ...

  7. 任务调度框架Quartz原理简介

    [TOC] 第一章 Quartz 1.1 Quartz概念 Quartz是OpenSymphony开源组织的一个Java开源项目, 在2009被Terracotta收购.Quartz官网 1.2 Qu ...

  8. 云计算之路-阿里云上：docker swarm 集群故障与异常

    在上次遭遇 docker swarm 集群故障后,我们将 docker 由 17.10.0-ce 升级为最新稳定版 docker 17.12.0-ce . 前天晚上22:00之后集群中的2个节点突然出 ...

  9. Mybatis之基于XML的增删改查

    这里先吐槽下,写的半天的东西,IE浏览器弹出调试窗口导致写的东西全部没保存,搞得我还要重新用谷歌写,思路全没了,fuck. 前面学习了下spring的DAO层,说起DAO层,那ORM肯定是少不了的,O ...

  10. CTF---密码学入门第二题 我喜欢培根

    我喜欢培根分值:20 来源: Ph0enix 难度:中 参与人数:3449人 Get Flag:1410人 答题人数:1653人 解题通过率:85% key: CTF{} 解题链接: http://c ...