用jq做bootrap网站
时间: 2023-09-20 08:08:17 浏览: 41
可以使用 jqBootstrapValidation 插件来使用 Bootstrap 和 jQuery 构建表单验证。首先,你需要在 HTML 页面中引入 Bootstrap 和 jQuery 库,然后再引入 jqBootstrapValidation 插件。然后,在 HTML 表单中添加必要的属性和规则,例如 `data-validation-required` 和 `data-validation-email`。最后,在 JavaScript 中初始化插件,并为表单添加提交事件。
以下是一个简单的示例:
HTML 代码:
```html
<form id="contactForm" novalidate>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" required data-validation-required-message="Please enter your name.">
<p class="help-block"></p>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" required data-validation-required-message="Please enter your email address." data-validation-email-message="Please enter a valid email address.">
<p class="help-block"></p>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" name="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block"></p>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
```
JavaScript 代码:
```javascript
$(function() {
$("#contactForm input,#contactForm textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from form and send AJAX request
},
filter: function() {
return $(this).is(":visible");
},
});
});
```
在这个示例中,`preventSubmit` 属性设置为 `true`,这样表单就不会自动提交,而是在 `submitSuccess` 回调函数中处理表单数据。`filter` 属性用于过滤表单元素,只有可见的元素才会被验证。在 `submitError` 回调函数中,可以添加其他的错误消息或事件。