-
表单验证插件有很多,不同的框架中选择的也不一样。
-
本文主要分享 bootstrapValidator 插件。
-
经过整理,总结它的使用步骤如下:
使用步骤:
-
先引入bootstrap.css 、jquery.js 和 bootstrap.js
-
引入 bootstrapValidator.css 和 bootstrapValidator.js
-
编写验证代码,为了方便,可以封装进一个函数
// 比如,验证一个用户名和密码
function test() {
return {
fields: {
username: { // 这里username是 input 的name属性值,表示对这个输入框进行验证
validators: {
notEmpty: { //不能为空
message: '用户名不能为空.'
},
stringLength: { //检测长度
min: 2,
max: 15,
message: '用户名需要2~15个字符'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: { //检测长度
min: 6,
max: 15,
message: '密码需要6~15个字符'
}
}
}
}
}
}
4.使用插件语法,监听表单提交事件,并使用验证。
// 语法:
// $('表单').bootstrapValidator(上面的验证函数()).on('success.form.bv', function (e) {}
// 比如,注册
$('.register form').bootstrapValidator(test()).on('success.form.bv', function (e) {
e.preventDefault();
// 通过验证,这里的代码将会执行。我们将Ajax请求的代码放到这里即可
});
实操示范:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../assets/lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="../assets/lib/validator/bootstrapValidator.min.css">
</head>
<body>
<form id="a">
<div class="form-group">
<label>用户名:</label>
<input type="text" name="username">
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" name="password">
</div>
<button type="submit">提交</button>
</form>
</body>
<script src="../assets/lib/jquery-3.6.0.min.js"></script>
<script src="../assets/lib/bootstrap/bootstrap.min.js"></script>
<script src="../assets/lib/validator/bootstrapValidator.min.js"></script>
<script>
// 比如,验证一个用户名和密码
function test() {
return {
fields: {
username: { // 这里username是 input 的name属性值,表示对这个输入框进行验证
validators: {
notEmpty: { //不能为空
message: '用户名不能为空.'
},
stringLength: { //检测长度
min: 2,
max: 15,
message: '用户名需要2~15个字符'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: { //检测长度
min: 6,
max: 15,
message: '密码需要6~15个字符'
}
}
}
}
}
}
$('form').bootstrapValidator(test()).on('success.form.bv', function(e) {
e.preventDefault();
// 通过验证,这里的代码将会执行。我们将Ajax请求的代码放到这里即可
console.log(1);
});
</script>
</html>
下面把敲 表单验证 代码 时遇到的问题及解决方案在这里分享:
表单验证的时候就报 Maximum call stack size exceeded栈溢出
解决:在需要验证的输入框的div标签上加上 class="form-group"即可解决