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

表单验证通常我一般有两种选择一种是 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.       border1px solid #CE5542;
  3.   }
  4.   label.error {
  5.       color#CE5542;
  6.   }
  7.   input.valid {
  8.       border1px solid #00a65a;
  9.   }
  10.   label.valid {
  11.       color#00a65a;
  12.   }
通过审查元素我们发现,表单验证未通过会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.                    },
  22.                },
  23.                password: {
  24.                    required: true,
  25.                    rangelength: [6, 20]
  26.                },
  27.                confirm_password: {
  28.                    required: true,
  29.                    equalTo: '#password'
  30.                },
  31.                qq: {
  32.                    required: true,
  33.                    number: true,
  34.                    rangelength: [5, 10]
  35.                }
  36.            },
  37.            messages: {
  38.                username: {
  39.                    required: "请输入用户名,用于登录",
  40.                    rangelength: $.validator.format("用户名长度在必须为:{0}-{1}之间"),
  41.                    remote: "该用户名已存在!"
  42.                },
  43.                password: {
  44.                    required: "请输入密码",
  45.                    rangelength: $.validator.format("密码长度必须为:{0}-{1}之间")
  46.                },
  47.                confirm_password: {
  48.                    required: "请再次输入密码",
  49.                    equalTo: "两次密码必须一致"
  50.                },
  51.                qq: {
  52.                    required: "请输入qq号,用于获取昵称和头像",
  53.                    number: "只允许输入数字",
  54.                    rangelength: "请检查qq号输入是否正确"
  55.                }
  56.            }
  57.        });
  58.    });
这里提一下这个自定义方法 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

发表评论

目前评论:1