这里是详细讲解“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技术站