Jquery validate 前段校验

详情查看官网：https://jqueryvalidation.org/

依赖   ： jquery

相关代码：

js 文件：

$("#register-form").validate({
        rules:{
            username:{
                required:true,
                minlength:4,
                maxlength:12
            },
            password:{
                required:true,
                minlength:4,
                maxlength:12
            },
            confirm_password:{
                required:true,
                minlength:4,
                maxlength:12,
                equalTo: "#password" // 相等的对应input 的id
            }
        }
    })

html 页面：

<form id="register-form" class="register-form" style="display: block;">
        <h3 class="font-green">注册</h3>
        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">用户名</label>
            <input id="username-input" class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="用户名" name="username"> </div>
        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">设置密码</label>
            <input id="password" class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="密码" name="password"> </div>
        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">确认密码</label>
            <input id="confirm_password" class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="密码确认" name="confirm_password"> </div>
        <div class="form-group margin-top-20 margin-bottom-20">
            <div id="register_tnc_error"> </div>
        </div>
        <div class="form-actions">
            <a href="${ctx}/front/login/home">已有账号，返回登录</a>
            <button type="button" id="register-submit-btn" class="btn btn-success uppercase pull-right" data-click="register">立即注册</button>
        </div>
    </form>

    另外，自定义错误信息可以直接定义一个css，取名为error，然后调用即可。因为当填写的信息不正确时，会自动添加一个class为error的label标签

错误提示css：

label.error {
    color: #ff3f13;
    font-size: 12px;
    margin: 5px 0px 0px 1px;
    font-weight: 400;
}