Bootstrap表单校验

295 阅读1分钟

1. 设置表单校验字段

    // 初始化表单校验
    initFormValidate: function () {
      $('#addEditForm').bootstrapValidator({
        message: 'This value is not valid',
        excluded: [":disabled"],
        //提供输入验证图标提示
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        // 表单校验字段
        fields: {
          login_name: {
            message: '登录名不能为空',
            validators: {
              notEmpty: {
                message: '登录名不能为空'
              },
              stringLength: {
                min: 4,
                max: 12,
                message: '登录名长度必须在4到12位之间'
              },
              regexp: {
                regexp: /^[a-zA-Z0-9_]+$/,
                message: '登录名只能包含大写字母、小写字母、数字和下划线',
              }
            }
          },
          password: {
            message: '密码不能为空',
            validators: {
              stringLength: {
                min: 6,
                max: 12,
                message: '密码长度必须在4到12位之间'
              },
              regexp: {
                regexp: /^([\@A-Za-z0-9\-\_\+\#\$]{6,12})?$/,
                message: '密码应为6到12位数字、字母、@-_+$#',
              }
            }
          },
        }
      })
    },

2. 判断表单校验是否通过

  var $domDialog = $('#addEditDialog');
  var $dom_addEditForm = $domDialog.find('#addEditForm');
  $domDialog.off('click', '.btnSubmit').on('click', '.btnSubmit', function () {
    $dom_addEditForm.data('bootstrapValidator').validate();
    if (!$dom_addEditForm.data('bootstrapValidator').isValid()) {
      return;
    } else {
      var data = $dom_addEditForm.serializeArray();
      layer.msg('通过校验');
    }
  })