Bootstrap 4 和 jQuery 验证插件 [重复]
Posted
技术标签:
【中文标题】Bootstrap 4 和 jQuery 验证插件 [重复]【英文标题】：Bootstrap 4 and jQuery Validation Plugin [duplicate] 【发布时间】：2018-11-20 00:54:12 【问题描述】：我正在做一个项目，我需要添加简单的方法来验证客户端表单，然后我转向了 jQuery 验证插件。我玩了一些基本的东西，但是当它变成这样时我很挣扎
到目前为止，我已经做了这么多
我的html代码
<body>
<form id="default-register-user" method="POST" action="index.php">
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control" id="validationServer01" placeholder="First name"
required name="fname">
</div>
<div class="col-md-4 mb-3">
<label for="validationServer02">Email</label>
<input type="text" class="form-control" id="validationServer02" placeholder="Last name" required name="lname" minlength="4">
</div>
<div class="col-md-4 mb-3">
<label for="validationServerUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
</div>
<input type="text" class="form-control" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3"
required name="username">
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function ()
$("#default-register-user").validate(
rules:
lfname:
required: true,
minlength: 5,
maxlength: 20
,
lname:
required: true,
minlength: 5,
maxlength: 20
,
username:
required: true,
minlength: 6,
maxlength: 25
);
);
</script>
</form>
</body>
我需要添加
输入字段下方的小消息是有效还是无效输入 当输入框有效或无效时，需要在输入框周围放置绿色或红色边框我该如何改进这一点，有人能解释一下它是如何工作的吗？我刚刚在网上搜索，我找到了如何使用 Bootstrap 3，但是有些类发生了变化，需要额外的 jQuery。
谢谢！
【问题讨论】：
【参考方案1】：Parsley jquery 插件也是如此。 你可以在这里玩我的小提琴：
https://jsfiddle.net/djibe89/tu0ap111/
// Parsley plugin initialization with tweaks to style Parsley for Bootstrap 4
$("#my-form").parsley(
errorClass: 'is-invalid text-danger',
successClass: 'is-valid', // Comment this option if you don't want the field to become green when valid. Recommended in Google material design to prevent too many hints for user experience. Only report when a field is wrong.
errorsWrapper: '<span class="form-text text-danger"></span>',
errorTemplate: '<span></span>',
trigger: 'change'
) /* If you want to validate fields right after page loading, just add this here : .validate()*/ ;
// Parsley full doc is avalailable here : https://github.com/guillaumepotier/Parsley.js/
【讨论】：
那是魅力男！和简单的感谢 如何使用 bootstrap 4 而不是 span 标签？ errorsWrapper: '',以上是关于Bootstrap 4 和 jQuery 验证插件 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
当同时使用bootstrap-datepicker.js和jquery.validate.js这两款插件，至少要选择两次时间，才能验证成功的问题
jquery配合Bootstrap中的表单验证插件bootstrapValidator使用方法
bootstrapValidator.js，最好用的bootstrap表单验证插件 简单实用方法
Bootstrap-3：使用 jQuery 验证消息输入 Group-Addon STRETCHES