bootstrap 5 表单验证

bootstrap 5 表单验证

写在前面

Bootstrap 是一个功能强大、功能丰富的前端工具包。bootstrap 以其优秀的栅格系统，为网页创作带来的极大的方便。目前版本是5.2 。然而在表单验证（formvalidation）它却是收费的,有没有办法使用其它办法来验证Bootstrap5表单？办法是有的。虽然Bootstrap 5 放弃了jQuer,但想要验证我们不得不把jQuer重新拾起来，下面介绍一款使用jQuer来验证表单的前端控件zpjbvalidator.js的使用方法。

zpjbvalidator.js表单验证演示：

bootstrap 5.13

1、邮箱验证

2、密码验证

3、单选框验证

4、多选框验证

5、文本区域验证

6、复选框验证

7、网址验证

8、自定义-最小-最大

9、自定义最小长度-最大长度

10、文件长度-日期等验证

11、远程失败验证

11、远程成功验证

1、 zpjbvalidator的前世今生

zpjbvalidator改编自jbvalidator是一个全新的基于jQuery的表单验证插件，它是为最新的Bootstrap 5框架创建的，理论上支持Bootstrap 3，Bootstrap 4支持客户端和服务器端验证。在原有功能基础上，修改了其核心代码。为了区别与源代码，将文件名更改为zpjbvalidator.js

1.1、原jbvalidator所具有的功能：

• 支持多语言。
• 支持自定义错误信息。
• 支持自定义验证规则。
• 支持HTML自定义属性…

1. 2、zpjbvalidator在jbvalidator的基础上增加如下功能：

• 原jbvalidator只有两种验证状态，成功与失败，zpjbvalidator增加了loading状态。
• 修改了其核心代码，多语言支持的代码段。
• 对外暴漏了成功调用代码段，这对远程验证是有帮助的。
• Options 选项增加了loading的状态。
• 由于是基于jQuery依赖的，增加了对jQuery版本的判断与jQuery是否被加载的判断。
• 客户端远程验证由ajax更改为axios。
• axios远程验证增加了验证超时判断，并对远程超时增加了三次重新连接发送验证字段，如果三次没有连接成功将接到错误消息并显示出来。
• 理论上支持bootstrap3、bootstrap4、bootstrap5以上所有验证，因为是基于HTML5的。
• Query需要 1.9.1或更高版本。
• 新增多选下拉框验证。注：原jbvalidator的多选下拉框是不可用的也可以说是一bug,在使用时可以删除351行至376行多选下拉框的内容。本次保留了原jbvalidator下拉框的内容以做区别之用。

  2、安装

2.1、loading样式加载

<link  href="../assets/vendor/jbvalidator/zpjbvalidator.css" rel="stylesheet">

2.2、bootstrap5 核心验证加载

<script src="../assets/vendor/jbvalidator/zpjvalidator.js"></script>

3、 字段说明

• Html 5 验证
• data-v-equal: 验证两个INPUT框中的内容是否相等，这对密码验证是有用的。
• data-v-min-select: 下拉多选框最少选项
• data-v-max-select: 下拉多选框最大选项
• data-checkbox-group: 组复选框元素的父属性
• data-v-min: min属性的替代，它可以用于属性类型文本
• data-v-max: Max属性的替代，这可以用于属性类型文本
• data-v-min-length: minlength属性的替代
• data-v-max-length: maxlength属性的替代
• data-v-min-size: 输入类型文件最小文件大小(字节)
• data-v-max-size: 输入类型文件最大文件大小(字节)
• data-v-message: 错误消息替代
• class="select-parent form-control"：在添加下拉多选框时必须添加一个"div 将下拉多选框包裹其中

4、 使用方法

• validator: 添加新的自定义验证
• checkAll(formSelector = null, event = null): 显示错误而不提交表单，返回错误计数
• errorTrigger(inputSelector, message): 显示从服务器返回的错误消息.
• successTrigger(inputSelector, message): 显示从服务器返回的成功消息.
• loadingTrigger(inputSelector, message): 显示等待从服务器返回消息.
• reload(): 添加动态元素后重新加载实例

4.1、如何使用

表单的form属性必须是 novalidate <form novalidate>

<script src="dist/jbvalidator.min.js"></script>
<script>
   $(function () {

    let validator = $('form.needs-validation').jbvalidator({
        errorMessage: true,//如果为flase则不显示错误信息
        successClass: true,//如果为flase则不显示成功信息
        //可以使用英文与中文如果用英文使用en.json
        language: '../assets/js/validation/lang/cn.json'
    });
    var valid = validator.validator;
    //新的自定义验证方法
    valid.password = function (el, event) {

        if ($(el).is('[name=password]') && $(el).val().length < 5) {
            return '密码必须包含字母、数字和特殊字符，且在6~18位之间.';
        }

        return '';
    }
    valid.UserName = function (el, event) {

        if ($(el).is('[name=username]') && $(el).val().length < 2) {
            return '用户名不能有数字字符！且在2~18位之间.';
        }
    }
    
});

</script>

4.2、 服务器验证

• 您可以显示从服务器返回的错误消息。".errorTrigger"方法可以用于此目的。
• .errorTrigger(element, message)
• 您也可以显示从服务器返回的成功消息。".successTrigger"方法可以用于此目的。
• .successTrigger(element, message)
• 您还可以显示等待消息返回从服务器端。".loadingTrigger,"方法可以用于此目的。
• .loadingTrigger,(element, message)

<script src="dist/jbvalidator.min.js"></script>
<script>
    $(function () {  
    let validatorServerSide = $('form.validatorServerSide').jbvalidator({
        //是否显示服务端验证成功与失败信息true:显示flase：不显示
        errorMessage: true,
        successMessage: true,
        loadingMessage: true        
        language: '../assets/js/validation/lang/cn.json'
    });

    //serverside
    const eamil = document.querySelector('input[name=email]');
    $(document).on('change', '.validatorServerSide', function () {
        //实例化axios
        const _AXIOS = axios.create()
        var message = 'loading...'
        //等待服务器返回消息
        validatorServerSide.loadingTrigger($('[name=email]'), message)
        //获取邮箱验证状态
        var ce = eamil.validity;
        //如果required（必填项）与pattern（正则验证)通过则
        if (ce.valueMissing === false && ce.patternMismatch === false) {
            let obj = { email: eamil.value }
            // 添加请求拦截
            _AXIOS.interceptors.request.use(function (config) {
                //let userinfo = window.sessionStorage.getItem('token')
                let userinfo = window.localStorage.getItem("token")
                // 判断token存在再做配置
                if (userinfo) {
                    //let token = JSON.parse(userinfo).token
                    config.headers.authorization = userinfo
                } else {
                    config.headers.authorization = '0000'
                }
                return config
            }, function (error) {
                // 请求错误做一些事情 
                return Promise.reject(error);
            });

            // 添加响应拦截
            _AXIOS.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
                var config = err.config;
                // 如果config不存在或没有设置重试选项，则拒绝 
                if (!config || !config.retry) return Promise.reject(err);
                // 设置用于跟踪重试计数的变量 
                config.__retryCount = config.__retryCount || 0;
                //检查我们是否已经把重试的总次数加到了最大值 
                if (config.__retryCount >= config.retry) {
                    // Reject with the error
                    return Promise.reject(err);
                }
                // 增加重试次数
                config.__retryCount += 1;
                //创造新的promise来处理指数后退 
                var backoff = new Promise(function (resolve) {
                    setTimeout(function () {
                        resolve();
                    }, config.retryDelay || 1);
                });
                // 返回调用axios以重试请求的promise 
                return backoff.then(function () {
                    return _AXIOS(config);
                });
            });

            _AXIOS({
                method: 'POST',
                url: "valid/valid-email",
                data: obj,
                timeout: 10000, //超时时间起作用必须实例化一下axios
                retry: 3, //请求超时重新发起请求
                retryDelay: 1000 //失败请求之间等待的毫秒数（默认为 1）;重新发起请求间隔
            }).then((response) => {
                if (response.data) {
                    var { code, message } = response.data
                    //服务器返回code：200为成功其它为失败
                    if (code == 200) {

                        validatorServerSide.successTrigger($('[name=email]'), message)
                    }
                    else {
                        validatorServerSide.errorTrigger($('[name=email]'), message)

                    }
                } else {
                    throw new Error(`${response.status} ${response.statusText} ${response.url}`);
                }

            }).catch((error) => {
                message = '出现错误服务器没有响应，请检测网络' + error
                validatorServerSide.errorTrigger($('[name=email]'), message)

            });

            return false;
        }
    });

});

</script>

4.3 Options选项

{
    language: '', //json 文件存放地址
    errorMessage: true,
    successMessage: true,
    loadingMessage: true,
    html5BrowserDefault: true,
    validFeedBackClass: 'valid-feedback',
    invalidFeedBackClass: 'invalid-feedback',
    loadingFeedBackClass: 'loading-feedback',
    successFeedBackClass: 'success-feedback',
    validClass: 'is-valid',
    invalidClass: 'is-invalid',
    loadingClass: 'is-loading',
    successClass: 'is-success'
}

5、注意事项

• 使用下拉框多选项需要加载Bootstrap-select 本例使用的版本为 v1.14.0-beta3
• 下载地址：http://developer.snapappointments.com/bootstrap-select/
• 本例Bootstrap v5.1.3
• 下载地址：https://getbootstrap.com/
• 本例jQuery-3.60
• 下载地址：https://jquery.com/
• 如果使用axios远程验证请加载axios
• 下载地址：npm i axios