jQuery-Validate验证插件的使用教程

avatar 2018年02月20日15:22:57 6 2957 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
表单验证通常我一般有两种选择一种是 Bootstrap 的bootstrap-validator，另一种是 jquery 的jquery-validate。

如果表单使用的是 Bootstrap 的可以直接使用 bootstrap-validator，不仅使用方便，而且样式也漂亮。

但是通常有时候没有使用 Bootstrap，或者我们想自定义错误提示样式，可以使用 jquery-validate，本文也是介绍这个。



先上动态效果图





下载地址：https://github.com/saysky/jQuery-Validate-Example


一、引入必备文件


jquery核心文件和jquery.validate.js
  1. <script th:src="@{/common/jquery/jquery.min.js}"></script>
  2. <script type="text/javascript" th:src="@{/common/jquery-validate/jquery.validate.js}"></script>

下载地址，点此




二、开始使用


HTML
  1. <form name="registerForm" id="registerForm" action="#"   method="post">
  2.         <p>
  3.             <label for="username"><strong>用户名</strong><br/>
  4.                 <input type="text" name="username" id="username" class="input" value="" size="20"/>
  5.             </label>
  6.         </p>
  7.         <br>
  8.         <p>
  9.             <label for="password"><strong>密码</strong><br/>
  10.                 <input type="password" name="password" id="password" class="input" value="" size="25"/>
  11.             </label>
  12.         </p>
  13.         <br>
  14.         <p>
  15.             <label for="password"><strong>确认密码</strong><br/>
  16.                 <input type="password" name="confirm_password" id="confirm_password" class="input" value="" size="25"/>
  17.             </label>
  18.         </p>
  19.         <br>
  20.         <p>
  21.             <label for="qq"><strong>QQ号码</strong><br/>
  22.                 <input type="text" name="qq" id="qq" class="input" value="" size="25"/>
  23.             </label>
  24.         </p>
  25.         <br/>
  26.         <p class="submit">
  27.             <input type="submit" name="submit" class="button button-primary button-large" value="注册"/>
  28.         </p>
  29.     </form>



效果图





CSS
  1. input.error {
  2.       border: 1px solid #CE5542;
  3.   }
  5.   label.error {
  6.       color: #CE5542;
  7.   }
  9.   input.valid {
  10.       border: 1px solid #00a65a;
  11.   }
  13.   label.valid {
  14.       color: #00a65a;
  15.   }

通过审查元素我们发现，表单验证未通过会addClass("error)，通过会addClass("valid")，为了好看我们自定义一点样式



JS
  1. $(function () {
  2.        //让当前表单调用validate方法，实现表单验证功能
  3.        $("#registerForm").validate({
  4.            success:"valid",
  5.            submitHandler:function() {
  6.                alert("欢迎加入我们!")
  7.            },
  8.            rules: {     //配置验证规则，key就是被验证的dom对象，value就是调用验证的方法(也是json格式)
  9.                username: {
  10.                    required: true,  //必填。如果验证方法不需要参数，则配置为true
  11.                    rangelength: [6, 12],
  12.                    remote: {
  13.                        url: "/ajax_check_username",     //后台处理程序
  14.                        type: "get",               //数据发送方式
  15.                        dataType: "json",           //接受数据格式
  16.                        data: {                     //要传递的数据
  17.                            username: function () {
  18.                                return $("#username").val();
  19.                            }
  20.                        }
  21.                    },
  23.                },
  24.                password: {
  25.                    required: true,
  26.                    rangelength: [6, 20]
  27.                },
  28.                confirm_password: {
  29.                    required: true,
  30.                    equalTo: '#password'
  31.                },
  32.                qq: {
  33.                    required: true,
  34.                    number: true,
  35.                    rangelength: [5, 10]
  36.                }
  37.            },
  38.            messages: {
  39.                username: {
  40.                    required: "请输入用户名,用于登录",
  41.                    rangelength: $.validator.format("用户名长度在必须为：{0}-{1}之间"),
  42.                    remote: "该用户名已存在！"
  43.                },
  44.                password: {
  45.                    required: "请输入密码",
  46.                    rangelength: $.validator.format("密码长度必须为：{0}-{1}之间")
  47.                },
  48.                confirm_password: {
  49.                    required: "请再次输入密码",
  50.                    equalTo: "两次密码必须一致"
  51.                },
  52.                qq: {
  53.                    required: "请输入qq号，用于获取昵称和头像",
  54.                    number: "只允许输入数字",
  55.                    rangelength: "请检查qq号输入是否正确"
  56.                }
  58.            }
  59.        });
  60.    });

这里提一下这个自定义方法 remote，如果返回值为 false 则触发 error(显示错误信息)，返回值为 true 触发 valid



Java
  1. @GetMapping(value = "/ajax_check_username")
  2.     @ResponseBody
  3.     public Boolean ajaxCheckUsername(String username) {
  4.         //用户名不存在,返回true
  5.         User user = userService.getUserByUsername(username);
  6.         if(user == null) {
  7.             return true;
  8.         }
  9.         //用户名存在,返回false
  10.         return false;
  11.     }



效果图


1、基本验证







2、通过回调函数，ajax 验证用户是否存在







注意

通常用户名，密码，确认密码，QQ号码不会有样式，这是因为我这里修改了源码(没有找到默认设置可以修改其他节点样式)，索性直接在源码里加了两行代码。

分别是在 901 行添加如下代码 
$("#" + elementID).parent("label").css("color", "#CE5542");

969行添加如下代码 
$("#" + elementID).parent("label").css("color", "#00a65a");







参考：http://www.runoob.com/jquery/jquery-plugin-validate.html



本文地址：https://liuyanzhao.com/7544.html







历史上的今天
二月
20日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0