表单校验神器

下载插件 :bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator

使用bootstrap-validator插件

校验规则:

  1. 用户名不能为空

  2. 用户密码不能为空

  3. 用户密码长度为6-12位

参照文档:《bootstrap-validator使用笔记.md》

 

 

$(function() {
/*
* 1. 进行表单校验配置
* 校验要求:
* (1) 用户名不能为空, 长度为2-6位
* (2) 密码不能为空, 长度为6-12位
* */
// 实现表单校验
  $('#form').bootstrapValidator({

// 配置图标
  feedbackIcons: {
    valid: 'glyphicon glyphicon-leaf', // 校验成功
    invalid: 'glyphicon glyphicon-remove', // 校验失败
    validating: 'glyphicon glyphicon-refresh' // 校验中..
  },
 

// 配置字段列表 field 字段 校验前, 需要先给每个input, 添加上 name
    fields: {
     username: {
// 校验规则
        validators: {
// 非空校验
          notEmpty: {
// 提示信息
            message: '用户名不能为空'
            },
         stringLength: {
         min: 2,
    max: 6,
   message: '用户名必须是2-6位'
   }
  }
},
// password
  password: {
   validators: {
// 非空
   notEmpty: {
    message: '密码不能为空'
    },
     stringLength: {
    min: 6,
    max: 12,
    message: '密码长度必须是6-12位'
      }
    }
   }
  }
  });
  });
posted @ 2019-05-30 21:48  羊羊羊小童鞋  阅读(121)  评论(0编辑  收藏  举报