Introduction and use of bootstrap

1. Form validation plugin

• There are many form validation plugins, and different frameworks choose different ones.

• There are many introductions about it on the Internet, such as here and here

Steps for usage:

1. First introduce bootstrap.css, jquery.js and bootstrap.js

2. Introduce bootstrapValidator.css and bootstrapValidator.js

3. Write verification code, for convenience, it can be encapsulated into a function

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. Use plugin syntax, listen for form submit events, and use validation

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

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