Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)遠(yuǎn)程驗(yàn)證功能

更新時(shí)間：2017年05月17日 16:08:34 作者：北冥沒(méi)有魚(yú)

這篇文章主要介紹了Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)遠(yuǎn)程驗(yàn)證功能,需要的朋友可以參考下

最近項(xiàng)目用到了一個(gè)很強(qiáng)大的表單驗(yàn)證。記錄下。官方地址：http://formvalidation.io/api/

還有一點(diǎn)很重要：這個(gè)插件的Bootstrap最好用他們自帶的，有點(diǎn)改動(dòng)。不用再去Bootstrap官網(wǎng)下載。

向上效果：

這里寫(xiě)圖片描述

先導(dǎo)入資源：

<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" rel="external nofollow" />
  <link rel="stylesheet" href="dist/css/formValidation.css" rel="external nofollow" /

<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="dist/js/formValidation.js"></script>
  <script type="text/javascript" src="dist/js/framework/bootstrap.js"></script>
  <script type="text/javascript" src="dist/js/language/zh_CN.js"></script>

html：

<form id="defaultForm" class="form-horizontal">
  <div class="form-group">
    <label class="col-xs-3 control-label">Full name</label>
    <div class="col-xs-5">
      <input type="text" class="form-control" name="boxId" />
    </div>
  </div>
</form>

下面是驗(yàn)證代碼；

$('#defaultForm').formValidation({
 message: '此值無(wú)效', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, locale: 'zh_CN', fields:{
    boxId:{
      verbose: false,//代表驗(yàn)證按順序驗(yàn)證。驗(yàn)證成功才會(huì)下一個(gè)（驗(yàn)證成功才會(huì)發(fā)最后一個(gè)remote遠(yuǎn)程驗(yàn)證）
      validators: {
        notEmpty: {
          message: '這是必填字段'
        },
        digits: {
          message: '值不是數(shù)字'
        },
        stringLength: {
          min: 16,
          message:'必須為16個(gè)數(shù)字'
        },
        remote: {
           type: 'POST',
          url: '/box/unique',
          message: '此設(shè)備號(hào)已存在',
          delay: 2000
        }
      }
    },
        onSuccess:function(){
    //點(diǎn)擊提交表單。表單所有都驗(yàn)證成功
       }
    });

后臺(tái)返回

{ “valid”: true }//通過(guò)驗(yàn)證 
或 
{ “valid”: false }//不通過(guò)—》 ‘此設(shè)備號(hào)已存在',

效果圖；

這里寫(xiě)圖片描述

以上所述是小編給大家介紹的Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)遠(yuǎn)程驗(yàn)證功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: