摘录自：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. jQuery基础 (四)——使用jquery-cookie 实现点赞功能

    jquery-cookie 下载地址:https://github.com/carhartl/jquery-cookie 直接上代码 html <span class="jieda-z ...

  2. Struts2学习笔记（1）---相关配置

    Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架. 1创建action对象(三种) 1 创建普通的类,不继承任何类, ...

  3. 在Ubuntu14.04上搭建自己的OpenVPN服务器并通过它上网

    背景 学校宿舍端口可以配置静态IP连校内网,也可以连到实验室的服务器:实验室的服务器可以连外网:但宿舍要连外网就要花钱买PPPoE账号了.作为壮哉我大计院的一员,本着发扬专(neng)业(sheng) ...

  4. Java学习笔记6---字符串比较方法compareTo(String str)

    方法原型为int compareTo(String str),返回值为int型,参数为字符串类型. 下面是简单示例: /* * compareTo()返回参与比较的两个字符串的ascii码差值 * O ...

  5. AIO5凭证性质设置接收下/上差(%)，但是订单操作不起效。

    问题: AIO5凭证性质设置接收下/上差(%),但是订单操作不起效. 例如: 现在采购订单下了200个,我想限制收货只能收两百以内. 在在线帮助上看到有接收下/上差(%)字段可以进行限制,但是在凭证性 ...

  6. Mongodb百亿级数据添加，修改，删除，查询等性能测试【四】

    集群的结构,大家可以查看我的另一遍文章,Mongodb的三种集群  在最后一种集群中,介绍到. 目前使用的数据就是最后一个测试集群,留下的数据. 简单介绍一下,四个分片的配置 192.168.99.6 ...

  7. golang其实也可以优先调度

    线上一个服务有个严重问题,处理消息数1k/s提升不上去,经过查看是阻塞在了一个新加的函数上,这个函数负责收集信息,送到一个channel上,再由某个函数处理,这个处理函数很简单,看不出任何问题,最大的 ...

  8. tcp链接断开的探测

    有资料说,read.write都可以探测tcp的断开,但都不是实时的. 但是实际在某些设备上测试发现,即使开一个线程每隔一小段时间发一次心跳包(write),write也不能探测连接已经断开,而且这个 ...

  9. java使用poi自定义excel标题头并导出（springmvc+poi）

    项目使用的是jeecg开源框架(springmvc+spring+hibernate+......等)此代码仅供参考!如有更好的意见或建议可留言. 1 controller 层 /** * excel ...

  10. cs231n spring 2017 lecture4 Introduction to Neural Networks 听课笔记

    1. Backpropagation:沿着computational graph利用链式法则求导.每个神经元有两个输入x.y,一个输出z,好多层这种神经元连接起来,这时候已知∂L/∂z,可以求出∂L/ ...