bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证

Bootstrap和jQuery.validate的结合可以实现HTML5表单验证。要实现这个功能，需要遵循以下步骤：

1. 在HTML页面上引入Bootstrap和jQuery库。

2. 为表单添加class为“needs-validation”，这将启用浏览器内置的HTML5验证。例如：

<form class="needs-validation" novalidate>
  ...
</form>

3. 使用jQuery.validate插件来增强表单验证功能。该插件可以为表单添加更多的规则和选项。例如：

$('form.needs-validation').validate({
  rules: {
    email: {
      required: true,
      email: true
    },
    password: {
      required: true,
      minlength: 6
    }
  },
  messages: {
    email: {
      required: 'Please enter your email address',
      email: 'Please enter a valid email address'
    },
    password: {
      required: 'Please enter your password',
      minlength: 'Your password must be at least 6 characters long'
    }
  }
});

4. 可以为表单元素添加data-*属性，以自定义验证规则。例如：

<input type="password" class="form-control" id="password" name="password" minlength="6" data-msg-minlength="Your password must be at least 6 characters long" required>

5. 在提交表单之前，可以使用jQuery.validate插件来验证表单。例如：

$('form.needs-validation').submit(function(event) {
  if ($(this).valid() === false) {
    event.preventDefault();
    event.stopPropagation();
  }
});

这些步骤可以帮助您实现Bootstrap+jQuery.validate的HTML5表单验证。