Bootstrap表单验证

表单验证是很常见的功能,Bootstrap提供发很多表单验证的样式,比如说文本、标签、按钮都有success、info、warning、danger几种样式来可以在表单验证时用派上用场。如果熟悉Bootstrap JavaScript插件,甚至还可以使用警告框(Alert)、弹出框(Popover)、模态框(Modal)来实现表单验证。仅用CSS是不可能表单验证的,使用Bootstrap JavaScript插件也难以实现代码的重用。本文讲解的是另外一种实现方式,Bootstrap结合jQuery validation插件来进行表单验证的重用。

  1. 导入js库:到https://jqueryvalidation.org下载最新版本的的jQuery Validation加入到现有工程,然后在将其引入到index.html中,如果需要用中文显示错误提示,还加添加中文包jquery.validate.messages_zh.js。
  2. 将校验规则写到控件中:打开模板文件login,为表单添加验证规则。比如对于登录邮箱,我们可以验证邮箱必填并且邮箱格式合法,对应的验证规则为data-rule-required=”true” data-rule-email=”true”,如果要自定义邮箱格式错误提示信息,可以设置data-msg-email。对于登录密码,则会验证必填及最少输入6个字符,对应的验证规则为data-rule-required=”true” data-rule-minlength=”6″。当然我们也可以将校验规则写到js代码中,不过这些代码和选择器耦合了,建议使用data-自定义属性的方式
  3. 调用validate方法验证:如果是ajax方式提交表单得将代码放置在submitHandler函数中。如果进行调试模式(表单不提交),可以添加debug属性并设置为true。当然我们在validate方法的其它选项。比如添加rules来自定义规则,使用messages来自定义的提示信息,使用errorPlacement来自定义错误放到哪里。通过这些选项可以完成几乎带有的验证功能。大家有兴趣可以测试一下这些选项。
  4. 覆写默认验证器:现在点击“确定按钮”会发现验证功能已经有了但样式不好看。如下图:

验证无样式
借助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方法的可选项来特殊处理。

最终效果如下图:

验证无样式

github:https://github.com/szriafan/bootstrap-tips/tree/04-vilidate
点击登录->查看按钮查看效果:https://szriafan.github.io/bootstrap-tips/app

发表评论