Bootstrap 表单验证formValidation 实现远程验证功能

这里是详细讲解“Bootstrap 表单验证formValidation 实现远程验证功能”的完整攻略：

什么是 Bootstrap 表单验证 formValidation

Bootstrap 表单验证 formValidation 是一种基于 jQuery 和 Bootstrap 的前端表单验证插件，它可以帮助开发者实现对表单数据的合法性检查。与其他前端表单验证插件相比，Bootstrap 表单验证 formValidation 具有以下优点：

它对 Bootstrap 样式的支持非常友好，可以轻松地与 Bootstrap 集成。
它支持多种校验规则和提示方式，可以满足各种不同的数据校验需求。
它支持远程校验和自定义校验函数，可以根据具体业务需要进行灵活的扩展。
它提供了详细的文档和示例，方便开发者快速上手。

实现远程验证功能的步骤

要实现远程验证功能，我们需要完成以下步骤：

引入必要的文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-validator@0.11.9/css/validator.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>  
<script src="https://cdn.jsdelivr.net/gh/formvalidation/formvalidation@1.8.2/dist/js/FormValidation.min.js"
    integrity="sha384-tGLEF1v9Dd9tzqgfW4LtDSzFJdA9pEJgOdwX2v5ZgEF8BFTThh39f4eBhDff25s8"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/formvalidation/formvalidation@1.8.2/dist/js/plugins/Bootstrap5.min.js"
    integrity="sha384-VTJqngotZ/Mn+v3U1CCouSeNlEEfM0Cus/UH/r0cNym9ZsEn6l4KuLaZedKtIcla"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/formvalidation/formvalidation@1.8.2/dist/js/plugins/Validator.min.js"
    integrity="sha384-cAE4Z5hrCPG8NlNtRUmzrMMvMnI441SFXrxDENQD9T3R3VaxJdwc9vj57oT2hMFu"
    crossorigin="anonymous"></script>

设置表单元素和校验规则

<form id="registerForm" method="post" class="form-horizontal" autocomplete="off">
    <div class="mb-3">
        <label class="form-label">用户名</label>
        <input type="text" class="form-control" name="username" required>
    </div>
    <div class="mb-3">
        <label class="form-label">邮箱</label>
        <input type="email" class="form-control" name="email" required>
    </div>
    <div class="mb-3">
        <label class="form-label">手机号</label>
        <input type="text" class="form-control" name="phone" required>
    </div>
    <button type="submit" class="btn btn-primary">注册</button>
</form>
<script>
    $(function () {
        $('#registerForm').formValidation({
            framework: 'bootstrap5',
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        remote: {
                            message: '用户名已存在',
                            url: '/checkUsername',
                            dataType: 'json',
                            data: {
                                username: function() {
                                    return $('input[name="username"]').val();
                                }
                            },
                            type: 'POST'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        remote: {
                            message: '邮箱已被注册',
                            url: '/checkEmail',
                            dataType: 'json',
                            data: {
                                email: function() {
                                    return $('input[name="email"]').val();
                                }
                            },
                            type: 'POST'
                        }
                    }
                },
                phone: {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        remote: {
                            message: '手机号已被注册',
                            url: '/checkPhone',
                            dataType: 'json',
                            data: {
                                phone: function() {
                                    return $('input[name="phone"]').val();
                                }
                            },
                            type: 'POST'
                        }
                    }
                }
            }
        });
    });
</script>

实现远程校验的后端接口

像上面代码所示，在每个表单元素的验证规则中设置 remote 属性，然后指定远程校验的 URL，并将需要传递的数据通过 data 属性传递给后端接口。

后端接口可以根据业务需求进行实现，例如：

@app.route('/checkUsername', methods=['POST'])
def checkUsername():
    username = request.form.get('username')
    # 检查用户名是否已存在
    if dao.checkUsername(username):
        return jsonify({'valid': False})
    else:
        return jsonify({'valid': True})

示例说明

异步请求示例：实现对用户注册时输入的用户名进行实时校验，如果用户名已存在，则提示用户修改。

在上面的代码中，我们给用户名的校验规则添加了一个 remote 属性，并指定了远程校验的 URL。

username: {
    validators: {
        notEmpty: {
            message: '用户名不能为空'
        },
        remote: {
            message: '用户名已存在',
            url: '/checkUsername',
            dataType: 'json',
            data: {
                username: function() {
                    return $('input[name="username"]').val();
                }
            },
            type: 'POST'
        }
    }
}

在后台实现用户名校验的接口 checkUsername：

@app.route('/checkUsername', methods=['POST'])
def checkUsername():
    username = request.form.get('username')
    # 检查用户名是否已存在
    if dao.checkUsername(username):
        return jsonify({'valid': False})
    else:
        return jsonify({'valid': True})

自定义校验函数示例：实现对用户注册时输入的密码和确认密码进行实时校验，如果两个输入的密码不一致，则提示用户修改。

在上面的代码中，我们给两个密码元素的校验规则都添加了一个相同的 custom 选项，并指定一个自定义函数。

password: {
    validators: {
        notEmpty: {
            message: '密码不能为空'
        },
        custom: {
            message: '两次密码不一致',
            validator: function () {
                var password = $('input[name="password"]').val();
                var confirmPassword = $('input[name="confirm_password"]').val();
                if (password !== confirmPassword) {
                    return false;
                }
                return true;
            }
        }
    }
},
confirm_password: {
    validators: {
        notEmpty: {
            message: '确认密码不能为空'
        },
        custom: {
            message: '两次密码不一致',
            validator: function () {
                var password = $('input[name="password"]').val();
                var confirmPassword = $('input[name="confirm_password"]').val();
                if (password !== confirmPassword) {
                    return false;
                }
                return true;
            }
        }
    }
}

在这个自定义函数中，我们通过比较两个密码元素的值来判断两次密码是否一致，如果不一致就返回 false，否则返回 true。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap 表单验证formValidation 实现远程验证功能 - Python技术站