BootStrap的validate表单验证使用

第一步: 引入js

<%
    String contextPath = request.getContextPath();
%>
<script src="<%=contextPath%>/static/js/bootstrap/bootstrapValidator.js"></script>

第二步: 页面中使用

<script type="text/javascript" language="JavaScript">
    /*
     *表单校验
     */
    $(function () {
    
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '请填写您的姓名'
                        }
                    }
                },
                phone: {
                    validators: {
                        notEmpty: {
                            message: '您应该填写手机'
                        },
                        stringLength: {
                            min: 11,
                            message: '联系方式应该不少于11位'
                        }
                    }
                },
                loginName: {
                    validators: {
                        notEmpty: {
                            message: '请填写您的登录名'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '请填写密码'
                        },
                        stringLength: {
                            min: 6,
                            message: '密码不少于6位'
                        }
                    }
                },
                repeatPassword: {
                    validators: {
                        notEmpty: {
                            message: '请填写确认密码'
                        },
                        identical: {
                            field: 'password',
                            message: '确认密码与密码不一致'
                        },
                    }
                },
                validateCode: {
                    verbose: false,
                    validators: {
                        notEmpty: {
                            message: '请填写验证码'
                        },
                        stringLength: {
                            min: 4,
                            message: '验证码为4位'
                        },
                        remote: {
                            type: 'GET',
                            url: '/api/validateCode',
                            message: '验证码不匹配',
                            delay: 1000
                        }
                    }
                },
                idCardNumber: {
                    verbose: false,
                    validators: {
                        notEmpty: {
                            message: '请填写身份证号码'
                        },
                        stringLength: {
                            min: 15,
                            max: 18,
                            message: '身份证不少于15位,不高于18位'
                        },
                        remote: {
                            type: 'GET',
                            //以get方式调用接口根据接口返回的valid,true为通过false为未通过
                            url: '/api/idCard/validate',
                            message: '身份证不合法或该ID已注册',
                            delay: 500
                        }
                    }
                }
            }
        })
        ;
    });

    /*
     * 当点击了确定下单的按钮后调用此方法
     * 然后执行表单校验
     * */

    function onsubmitFn() {
    
        //表单提交前再进行一次验证
        var bootstrapValidator = $("#defaultForm").data('bootstrapValidator');
        bootstrapValidator.validate();
        //如果验证通过()则提交表单
        return bootstrapValidator.validate();
    }
</script>

服务端校验代码示例:

    @ResponseBody
    @RequestMapping("idCard/validate")
    private Map idCardValidate(@RequestParam(defaultValue = "0") String idCardNumber) {
        Map dateMap = new HashMap();
        //1. 校验身份证是否合法
        dateMap.put("valid", true);

        IdCardCheck idCardCheck = new IdCardCheck(idCardNumber);
        if (idCardCheck.isCorrect() != 0) {
            dateMap.put("valid", false);
            return dateMap;
        }
        return dateMap;
    }

第四:贡献一个身份证校验的代码(严格)

package com.air.utils;

public class IdCardCheck {
   
    private static int IS_EMPTY = 1;
    private static int LEN_ERROR = 2;