• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

BootstrapValidator 表单选择性数据验证方法

JavaScript 开心洋葱 2142次浏览 0个评论

BootstrapValidator官方下载地址:
https://codeload.github.com/nghuuphuoc/bootstrapvalidator/zip/v0.4.5

BootstrapValidator 表单选择性数据验证方法示例代码:

演示
<!DOCTYPE html>
<html>
<head>
    <title>BootstrapValidator 表单选择性数据验证方法</title>

    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>

    <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <section>
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="page-header">
                        <h2>BootstrapValidator 表单选择性数据验证方法</h2>
                    </div>

                    <form id="paymentForm" method="post" class="form-horizontal" action="target.php">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">填写的数字</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" id="cardHolder" />
                            </div>
                        </div>

                      
                        <div class="form-group">
                            <label class="col-lg-3 control-label">选判断项(如果上面填写的数字为3则不验证此项有效性)</label>
                            <div class="col-lg-2">
                                <input type="text" id="cvv" class="form-control cvvNumber" name="cvv" />
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-lg-9 col-lg-offset-3">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
        </div>
    </div>

<script type="text/javascript">
$(document).ready(function() {
    $('#paymentForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            cardHolder: {
                selector: '#cardHolder',
                validators: {
				 /*callback: {
                    callback: function(value, validator, $field) {
                        field_name = $($field).attr('value');
						//alert(value);
						$('#cvv').removeAttr("cvvNumber");
						 $('#paymentForm')
                                    .bootstrapValidator('resetField', $('#cvv') )
                                    .bootstrapValidator('updateStatus', $('#cvv') , 'NOT_VALIDATED')
                                    ;
                            return true;
						}
				},*/

                    notEmpty: {
                        message: 'The card holder is required'
                    },
                    stringCase: {
                        message: 'The card holder must contain upper case characters only',
                        case: 'upper'
                    }
                }
            },
           
            cvvNumber: {
                selector: '.cvvNumber',
                validators: {
					 callback: {
                        callback: function(value, validator, $field) {
                            if($("#cardHolder").val()=='3'){
								field_name = $($field).attr('value');
								 $('#paymentForm')
                                    .bootstrapValidator('resetField', field_name )
                                    .bootstrapValidator('updateStatus', field_name, 'NOT_VALIDATED')
                                    ;
								return  true;
							}
                        }
                    },
                    notEmpty: {
                        message: 'The CVV number is required'
                    },
                    cvv: {
                        message: 'The value is not a valid CVV',
                        creditCardField: 'ccNumber'
                    }
                }
            }
        }
    });
});
</script>
</body>
</html>


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明BootstrapValidator 表单选择性数据验证方法
喜欢 (0)

您必须 登录 才能发表评论!

加载中……