表单验证插件bootstrapValidator

使用步骤:

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

  2. 引入 bootstrapValidator.css 和 bootstrapValidator.js

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

    // 比如,验证一个用户名和密码
     function test() {   // 方法自己任起
       return {
            // 固定写死
         fields: {
           username: { // 这里username是 input 的name属性值,表示对这个输入框进行验证
             validators: { // 添加真正的校验规则
               notEmpty: {   //不能为空
                 message: '用户名不能为空.'// 如果不满足校验规则,则给出这句提示
               },
               stringLength: {   //检测长度
                 min: 2, // 最少2位
                 max: 15, // 最多15位
                 message: '用户名需要2~15个字符'
               }
             }
           },
           password: {
             validators: {
               notEmpty: {
                 message: '密码不能为空'
               },
               stringLength: {   //检测长度
                 min: 6,
                 max: 15,
                 message: '密码需要6~15个字符'
               }
             }
           }
         }
       }
     }
  4. 使用插件语法,监听表单提交事件,并使用验证

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

提示框插件

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值