Bootstrap 表单验证

表单验证是很常见的功能，Bootstrap提供发很多表单验证的样式，比如说文本、标签、按钮都有success、info、warning、danger几种样式来可以在表单验证时用派上用场。如果熟悉Bootstrap JavaScript插件，甚至还可以使用警告框（Alert）、弹出框（Popover）、模态框（Modal）来实现表单验证。

问题

仅用CSS是不可能表单验证的，使用Bootstrap JavaScript插件也难以实现代码的重用。本文讲解的是另外一种实现方式，Bootstrap结合jQuery validation插件来进行表单验证的重用。

解决步骤

导入js库

到 https://jqueryvalidation.org下载最新版本的的jQuery Validation加入到现有工程，然后在将其引入到index.html中，如果需要用中文显示错误提示，还加添加中文包jquery.validate.messages_zh.js。

将校验规则写到控件中

打开模板文件login，为表单添加验证规则。比如对于登录邮箱，我们可以验证邮箱必填并且邮箱格式合法，对应的验证规则为data-rule-required="true" data-rule-email="true"，如果要自定义邮箱格式错误提示信息，可以设置data-msg-email。对于登录密码，则会验证必填及最少输入6个字符，对应的验证规则为data-rule-required="true" data-rule-minlength="6。当然我们也可以将校验规则写到js代码中，不过这些代码和选择器耦合了，建议使用data-自定义属性的方式

调用validate方法验证

如果是ajax方式提交表单得将代码放置在submitHandler函数中。如果进行调试模式（表单不提交），可以添加debug属性并设置为true。当然我们在validate方法的其它选项。比如添加rules来自定义规则，使用messages来自定义的提示信息，使用errorPlacement来自定义错误放到哪里。通过这些选项可以完成几乎带有的验证功能。大家有兴趣可以测试一下这些选项。

覆写默认验证器

现在点击确定按钮会发现验证功能已经有了，但样式不好看。如下图：

原生实现

借助Bootstrap强大的样式我们来增强一下用户体验。如下面代码：

$.extend($.validator.defaults, {
  errorElement: 'span',
  errorClass: 'help-block', // 自定义错误提示的样式为Bootstrap的help-block
  focusInvalid: false, // 提交表单后，未通过验证的表单不会获得焦点
  ignore: "", // 对所有元素进行验证

  highlight: function(element) {
    $(element).closest('.form-group').addClass('has-error');
  },

  success: function(label) {
    label.closest('.form-group').removeClass('has-error');
    label.remove();
  }
});

这些选项对应validate方法的可选项。那你可以要问了，为什么还要覆写呢？主要还是覆写能实现代码重用，对于个别表单元素我们可以结合validate方法的可选项来特殊处理。