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请求的代码放到这里即可
});

猜你喜欢

转载自blog.csdn.net/m0_70619994/article/details/126559916