JS元件Form表單驗證神器BootstrapValidator_javascript技巧

本文為大家分享了JS元件Form表單驗證神器BootstrapValidator，供大家參考，具體內容如下

1、初用法
來看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。從描述中我們就可以知道它至少需要jQuery、bootstrap的支援。我們先引入所需的js元件：

 <script src="~/Scripts/jquery-1.10.2.js"></script>

  <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
  <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

  <script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
  <link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

我們知道，既然是表單驗證，那麼我們在cshtml頁面就必須要有一個Form，我們知道Form裡面取元素都是透過name屬性去取值的，所以，表單裡面的元素都要有一個name的屬性值。

　<form>
      <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" />
      </div>
      <div class="form-group">
        <label>Email address</label>
        <input type="text" class="form-control" name="email" />
      </div>
      <div class="form-group">
        <button type="submit" name="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>

有了表單元素之後，就是我們的js初始化了。

  $(function () {
    $('form').bootstrapValidator({
　　　　　　　　message: 'This value is not valid',
      　feedbackIcons: {
        　　　　　　　　valid: 'glyphicon glyphicon-ok',
        　　　　　　　　invalid: 'glyphicon glyphicon-remove',
        　　　　　　　　validating: 'glyphicon glyphicon-refresh'
      　　　　　　　　  },
      fields: {
        username: {
          message: '用户名验证失败',
          validators: {
            notEmpty: {
              message: '用户名不能为空'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱地址不能为空'
            }
          }
        }
      }
    });
  });

內容應該很容易看懂。來看效果：

驗證通不過，提交按鈕灰掉不能點擊

驗證通過，提交按鈕恢復

看看效果先感受下，最大優點：使用簡單，介面友善。下面我們就來看看重疊驗證。

2、中級用法
上面我們知道了非空驗證的寫法，除此之外一定還有其他驗證方式。別急，我們慢慢來看。上面的程式碼cshtml部分不動，js部分我們稍作修改：
　

　$(function () {
    $('form').bootstrapValidator({
      message: 'This value is not valid',
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        username: {
          message: '用户名验证失败',
          validators: {
            notEmpty: {
              message: '用户名不能为空'
            },
            stringLength: {
              min: 6,
              max: 18,
              message: '用户名长度必须在6到18位之间'
            },
            regexp: {
              regexp: /^[a-zA-Z0-9_]+$/,
              message: '用户名只能包含大写、小写、数字和下划线'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱不能为空'
            },
            emailAddress: {
              message: '邮箱地址格式有误'
            }
          }
        }
      }
    });
  });

加上了重疊驗證我們來看效果：

由上面的程式碼可以看出在validators屬性對應一個Json對象，裡面可以包含多個驗證的型別：

• notEmpty：非空白驗證；
• stringLength：字串長度驗證；
• regexp：正規表示式驗證；
• emailAddress：郵件地址驗證（都不用我們去寫信箱的正規了~~）

除此之外，在文件裡面我們看到它總共有46個驗證類型，我們抽幾個常見的出來看看：

• base64：64位元編碼驗證；
• between：驗證輸入值必須在某一個範圍值以內，例如大於10小於100；
• creditCard：身分證驗證；
• date：日期驗證；
• ip：IP位址驗證；
• numeric：數值驗證；
• phone：電話號碼驗證；
• uri：url驗證；

還有一個比較常用的就是submitHandler屬性，它對應著提交按鈕的事件方法。使用如下：

$(function () {
    $('form').bootstrapValidator({
      message: 'This value is not valid',
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        username: {
          message: '用户名验证失败',
          validators: {
            notEmpty: {
              message: '用户名不能为空'
            },
            stringLength: {
              min: 6,
              max: 18,
              message: '用户名长度必须在6到18位之间'
            },
            regexp: {
              regexp: /^[a-zA-Z0-9_]+$/,
              message: '用户名只能包含大写、小写、数字和下划线'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱不能为空'
            },
            emailAddress: {
              message: '邮箱地址格式有误'
            }
          }
        }
      },
      submitHandler: function (validator, form, submitButton) {
        alert("submit");
      }
    });
  });

在它的Demo裡面介紹了許多驗證的實例。我們簡單看看它的效果，至於實作程式碼，其實很簡單，有興趣的可以直接看api。

顏色驗證

Tab頁表單驗證

按鈕驗證

 以上就是關於本文的全部內容，希望對大家的學習有所幫助。