bootstrap的介绍和使用

1、表单验证插件

• 表单验证插件有很多，不同的框架中选择的也不一样。

• 网上有很多关于它的介绍，比如这里 和 这里

使用步骤：

1. 先引入bootstrap.css 、jquery.js 和 bootstrap.js

2. 引入 bootstrapValidator.css 和 bootstrapValidator.js

3. 编写验证代码，为了方便，可以封装进一个函数

4. // 比如，验证一个用户名和密码
   function test() {
     return {
       fields: {
         username: { // 这里username是 input 的name属性值，表示对这个输入框进行验证
           validators: {
             notEmpty: {   //不能为空
               message: '用户名不能为空.'
             },
             stringLength: {   //检测长度
               min: 2,
               max: 15,
               message: '用户名需要2~15个字符'
             }
           }
         },
         password: {
           validators: {
             notEmpty: {
               message: '密码不能为空'
             },
             stringLength: {   //检测长度
               min: 6,
               max: 15,
               message: '密码需要6~15个字符'
             }
           }
         }
       }
     }
   }

5. 使用插件语法，监听表单提交事件，并使用验证

// 语法：
// $('表单').bootstrapValidator(上面的验证函数()).on('success.form.bv', function (e) {}

// 比如，注册
$('.register form').bootstrapValidator(test()).on('success.form.bv', function (e) {
    e.preventDefault();
    // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
});