jquery validate自定义checkbox验证规则和样式

简介:   参考:http://blog.csdn.net/xh16319/article/details/9987847   自定义checkbox验证,“检查checkbox是否选中” jQuery.

  参考:http://blog.csdn.net/xh16319/article/details/9987847

  自定义checkbox验证,“检查checkbox是否选中”

jQuery.validator.addMethod("isAgreeRule", function(value, element) {
    return element.checked;
}, "请阅读并同意用户协议后提交!");

  添加到验证规则

$(function() {
    $("#registerFrom").validate({
        rules : {
            login_name : {
                required : true
            },
            password : {
                required : true,
                rangelength : [ 8, 20 ]
            },
            confirm_password : {
                required : true,
                equalTo : "#password"
            },
            captcha : {
                required : true
            },
            agree_rule : {
                isAgreeRule : true
            }
        },
        errorPlacement : function(error, element) {
            if (element.is(':radio') || element.is(':checkbox')) { // 如果是radio或checkbox
                var eid = element.attr('name'); // 获取元素的name属性
                error.appendTo(element.parent()); // 将错误信息添加当前元素的父结点后面
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler : function(form) {
            submitFrom();
        }
    });
});

  添加自定义样式:

<style type="text/css">
input.control-label-error {
    border: 1px solid red;
}

.control-label-error {
    padding-left: 16px;
    padding-bottom: 2px;
    font-weight: bold;
    color: #EA5200;
}
</style>

  完整代码如下:

  html

<%@ page language="java" pageEncoding="UTF-8"%>
<style type="text/css">
input.control-label-error {
    border: 1px solid red;
}

.control-label-error {
    padding-left: 16px;
    padding-bottom: 2px;
    font-weight: bold;
    color: #EA5200;
}
</style>

<!-- 注册框 -->
<div class="modal fade" id="regModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title text-center">注册</h4>
            </div>
            <div class="modal-body">
                <div class="login_box">
                    <form id="registerFrom" method="post"
                        class="form-horizontal form-validate">
                        <div class="form-group">
                            <input type="text" class="form-control"
                                placeholder="请输入用于注册的手机号码" name="login_name">
                        </div>
                        <!-- <div class="form-group has-mb-code">
                        <input type="text" class="form-control" placeholder="手机验证码">
                        <a href="javascript:" class="btn btn-warning m-code">获取验证码</a>
                    </div> -->
                        <div class="form-group">
                            <input id="password" type="password" class="form-control"
                                placeholder="密码(长度为8-20个字符,含字母和数字)" name="password">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control"
                                placeholder="确认密码(长度为8-20个字符,含字母和数字)" name="confirm_password">
                        </div>
                        <div class="form-group has-code">
                            <input type="text" class="form-control" placeholder="图形验证码"
                                name="captcha"> <span class="form-control-code"><img
                                id="kaptcha" src="../kaptcha.jpg"></span>
                        </div>
                        <div class="checkbox">
                            <label> <input id="agree_rule" type="checkbox"
                                name="agree_rule"> 我已阅读并同意<a href="#">《用户协议》</a>
                            </label>
                        </div>
                        <button type="submit" data-loading-text="提交中..."
                            class="btn btn-primary btn-block m_b">注册</button>
                        <!-- <a href="perfectinfo.html" class="btn btn-primary btn-block m_b">注册</a> -->
                        <p>
                            <a href="javascript:" data-dismiss="modal" data-toggle="modal"
                                data-target="#loginModal">老用户,请登录</a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript"
    src="${rootPath}/resources/js/register/register.js"></script>
<script type="text/javascript">
    $(function() {
        $('#kaptcha').click(
                function() {
                    $("#kaptcha").hide()
                            .attr(
                                    'src',
                                    '../kaptcha.jpg?'
                                            + Math.floor(Math.random() * 100))
                            .fadeIn();
                });
    });
</script>

  js

jQuery.validator.addMethod("isAgreeRule", function(value, element) {
    return element.checked;
}, "请阅读并同意用户协议后提交!");

$(function() {
    $("#registerFrom").validate({
        rules : {
            login_name : {
                required : true
            },
            password : {
                required : true,
                rangelength : [ 8, 20 ]
            },
            confirm_password : {
                required : true,
                equalTo : "#password"
            },
            captcha : {
                required : true
            },
            agree_rule : {
                isAgreeRule : true
            }
        },
        errorPlacement : function(error, element) {
            if (element.is(':radio') || element.is(':checkbox')) { // 如果是radio或checkbox
                var eid = element.attr('name'); // 获取元素的name属性
                error.appendTo(element.parent()); // 将错误信息添加当前元素的父结点后面
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler : function(form) {
            submitFrom();
        }
    });
});

function registerFrom() {
    var url = rootPath + "/web/register.html";
    var params = $("#registerFrom").serialize();
    $.post(url, params, function(data) {
        if (data.code == 0) {
            window.location.href = rootPath + '/role/list.html';
        }
    });
}

 

相关文章
|
8天前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
24 1
|
6天前
|
前端开发 JavaScript
|
8天前
|
JavaScript 前端开发
jquery的属性样式
jquery的属性样式
10 1
|
8天前
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
9 0
|
8天前
|
JavaScript
jquery给轮播图的第一张设置class样式
jquery给轮播图的第一张设置class样式
10 0
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
52 0
|
8天前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
24 0
|
8天前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
31 0
|
8天前
|
JavaScript 数据安全/隐私保护
jquery正则表达式验证手机号密码和姓名字段
jquery正则表达式验证手机号密码和姓名字段
|
6月前
|
JavaScript
jQuery数据结构渲染(4):复选框checkbox赋值
jQuery数据结构渲染(4):复选框checkbox赋值
40 1