[bootstrapValidator] - bootstrap的验证工具

Posted 2021-02-04 ukzq

翻了下之前和同事做的一个验证

<!--bootstrapValidator-->
<script type="text/javascript" th:inline="none">

    $(function () {
        $(‘form‘).bootstrapValidator({
            message: ‘This value is not valid‘,
            feedbackIcons: {
                valid: ‘glyphicon glyphicon-ok‘,
                invalid: ‘glyphicon glyphicon-remove‘,
                validating: ‘glyphicon glyphicon-refresh‘
            },
            fields: {
                memberName: {
                    message: ‘用户名验证失败‘,
                    validators: {
                        notEmpty: {
                            message: ‘用户名不能为空，请重新输入‘
                        },
                        stringLength: {
                            min: 2,
                            max: 18,
                            message: ‘用户名长度必须在2到18位之间‘
                        },
                        regexp: {
                            //适用于判断中英文姓名，鉴于英文姓名中间常有空格，所以也加入了适用空格的判断；中文姓名也支持空格以及“·”的匹配
                            regexp: /^[u4E00-u9FA5A-Za-zs]+(·[u4E00-u9FA5A-Za-z]+)*$/,
                            message: ‘姓名格式错误，请重新输入‘
                        }
                    }
                },
                memberPhone: {
                    validators: {
                        notEmpty: {
                            message: ‘手机号码不能为空，请重新输入‘
                        },
                        regexp: {
                            regexp:/^1[34578]d{9}$/,
                            message: ‘手机号码格式有誤，请重新输入‘
                        }
                    }
                },
                memberIdentity:{
                    validators:{
                        notEmpty:{
                            message:‘身份证号码不能为空，请重新输入‘
                        },
                        regexp:{
                            regexp:/(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/,
                            message:‘身份证号码格式有误，请重新输入‘
                        }
                    }
                },
                memberCarnumber:{
                    validators:{
                        notEmpty:{
                            message:‘车牌号码不能为空，请重新输入‘
                        },
                        regexp:{
                            regexp:/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/,
                            message:‘车牌号码格式有誤，请重新输入‘
                        }
                    }
                }
            }
        })
            .on(‘success.form.bv‘,function(e){
                // Prevent form submission
                e.preventDefault();

                // Get the form instance
                var $form = $(e.target);

                // Get the BootstrapValidator instance
                var bv = $form.data(‘bootstrapValidator‘);

                // Use Ajax to submit form data
                $.post($form.attr(‘action‘), $form.serialize(), function(result) {
                    console.log(result);
                    alert(result.code);
                    alert(result.message);
                    if(result.code==1){
                        window.location.href="/showCards?cardType="+ $form.serialize()[9];
                    }
                }, ‘json‘);
            });
    });

</script>

需要引入bootstrapValidator的js和css文件

    <!--bootstrapValidator-->
    <script th:src="@{/js/bootstrapValidator.min.js}"></script>

    <link th:href="@{/css/bootstrapValidator.min.css}" rel="stylesheet">