让我来为您详细讲解如何使用bootstrapValidator插件进行动态添加表单元素并校验。
1、bootstrapValidator简介
bootstrapValidator是一个基于Bootstrap的优秀表单验证插件,支持表单的实时验证和AJAX提交,提供多种验证方式,例如:必填、长度、邮箱、手机、网址等。
2、动态添加表单元素
当我们需要动态地添加表单元素时,可以使用jquery的append()
方法在表单中添加新的html元素。
例如,在页面上添加一个按钮,点击按钮可以动态地在表单中添加一个文本框:
<form id="myForm">
<div class="form-group">
<label>姓名:</label>
<input type="text" name="name" class="form-control" />
</div>
<div class="form-group">
<label>年龄:</label>
<input type="text" name="age" class="form-control" />
</div>
<div class="form-group" id="add">
<button type="button" class="btn btn-primary">添加其它信息</button>
</div>
</form>
$(function () {
$('#add').click(function () {
$('#myForm').append('<div class="form-group"><label>城市:</label><input type="text" name="city" class="form-control"></div>');
})
});
3、使用bootstrapValidator校验动态添加的表单元素
当我们动态地添加了表单元素后,需要对这些新添加的元素进行校验,可以通过bootstrapValidator的addField()
和removeField()
方法来实现。
例如,在上述的动态添加表单元素的示例中,我们需要对新添加的城市文本框进行校验,可以按照以下步骤进行:
首先,在页面中引入bootstrap-validator.min.js
和bootstrap.min.css
文件。
然后,在表单元素动态添加的jquery代码中,加入校验代码:
$(function () {
$('#add').click(function () {
$('#myForm').append('<div class="form-group"><label>城市:</label><input type="text" name="city" class="form-control"></div>');
$('#myForm').bootstrapValidator('addField', 'city', {
validators: {
notEmpty: {
message: '城市不能为空'
},
stringLength: {
min: 2,
max: 10,
message: '城市长度必须在2到10之间'
}
}
});
})
});
这里我们使用了addField()
方法给动态添加的城市文本框添加了校验规则。具体来说,我们为城市文本框添加了非空和长度限制校验规则。
如果要移除这个城市文本框的校验规则,可以使用removeField()
方法,示例如下:
$(function () {
$('#add').click(function () {
$('#myForm').append('<div class="form-group"><label>城市:</label><input type="text" name="city" class="form-control"></div>');
$('#myForm').bootstrapValidator('addField', 'city', {
validators: {
notEmpty: {
message: '城市不能为空'
},
stringLength: {
min: 2,
max: 10,
message: '城市长度必须在2到10之间'
}
}
});
})
// 移除城市文本框的校验规则
$('button#remove').click(function () {
$('#myForm').bootstrapValidator('removeField', 'city');
$('#myForm div.form-group:last').remove();
})
});
这里我们添加了一个按钮,点击该按钮可以移除动态添加的城市文本框及其校验规则。
4、示例
下面为两个示例:
示例一:向表单中动态添加文本框,限制文本框长度在3到8个字符之间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrapValidator示例</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form id="myForm">
<div class="form-group">
<label>用户名:</label>
<input type="text" name="username" class="form-control" />
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" name="password" class="form-control" />
</div>
<div class="form-group" id="add">
<button type="button" class="btn btn-primary">添加其它信息</button>
</div>
<button type="submit" class="btn btn-success">提交</button>
</form>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script>
$(function () {
$('#myForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {
message: '用户名不能为空'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
}
}
}
},
submitHandler: function (validator, form, submitButton) {
alert('提交成功');
},
onError: function (event, validator) {
alert('请检查您填写的信息');
}
});
$('#add').click(function () {
$('#myForm').append('<div class="form-group"><label>其他信息:</label><input type="text" name="other" class="form-control"></div>');
$('#myForm').bootstrapValidator('addField', 'other', {
validators: {
stringLength: {
min: 3,
max: 8,
message: '请输入3-8个字符'
}
}
});
})
});
</script>
</body>
</html>
示例二:向表单中动态添加下拉框,限制下拉框必选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrapValidator示例</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form id="myForm">
<div class="form-group">
<label>姓名:</label>
<input type="text" name="name" class="form-control" />
</div>
<div class="form-group">
<label>年龄:</label>
<input type="text" name="age" class="form-control" />
</div>
<div class="form-group" id="add">
<button type="button" class="btn btn-primary">添加其它信息</button>
</div>
<button type="submit" class="btn btn-success">提交</button>
</form>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script>
$(function () {
$('#myForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: '姓名不能为空'
}
}
},
age: {
validators: {
notEmpty: {
message: '年龄不能为空'
}
}
}
},
submitHandler: function (validator, form, submitButton) {
alert('提交成功');
},
onError: function (event, validator) {
alert('请检查您填写的信息');
}
});
$('#add').click(function () {
var html = '<div class="form-group">';
html += '<label>城市:</label>';
html += '<select name="city" class="form-control">';
html += '<option value="">请选择城市</option>';
html += '<option value="北京">北京</option>';
html += '<option value="上海">上海</option>';
html += '<option value="广州">广州</option>';
html += '<option value="深圳">深圳</option>';
html += '</select>';
html += '</div>';
$('#myForm').append(html);
$('#myForm').bootstrapValidator('addField', 'city', {
validators: {
notEmpty: {
message: '请选择城市'
}
}
});
})
});
</script>
</body>
</html>
以上就是使用bootstrapValidator插件进行动态添加表单元素并校验的完整攻略。希望对您有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用bootstrapValidator插件进行动态添加表单元素并校验 - Python技术站