表單驗證插件--formvalidation

表單驗證是一個很是基礎的功能，當你的表單項少的時候，能夠本身寫驗證，可是當你的表單有不少的時候，就須要一些驗證的插件。今天介紹一款很好用的表單驗證插件，formvalidation。其前身叫作bootstrapValidator.

官網：http://formvalidation.io/

下載：目前的最新版本是收費的，可是咱們能夠下載以前的版本。下載地址：http://down.htmleaf.com/1505/201505101833.zip

下載以後，解壓，整個文件夾裏面除了最基本的js和css，還包含了不少實例，有興趣的能夠本身去看看。接下來簡要介紹一下它的用法。

1.導入包

css:

<link rel="stylesheet"
    href="./static/formvalidation/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
    href="./static/formvalidation/dist/css/formValidation.css">

js:

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

須要注意的是，即使你已經在項目中導入了bootstrap.js，仍是須要再導入上述的bootstrap.js文件，由於它和你以前導入的並不相同。

還有就是即使你已經導入了jquery.min.js，最好仍是導入這邊的jquery.min.js，由於若是不導入，可能會致使remote類型的驗證失效。

2.表單

表單項的填寫須要聽從兩個原則，表單項的class需標記爲：form-control。而且提交按鈕的id或者name不要設爲sumbit,不然在驗證以後會出現沒法提交的狀況，一個典型的表單以下所示。

 

    <form id="thisForm" method="post" action="">
                <input type="hidden" name="type" value="1" />
                <div class="container-fluid ">
                    <div class="col-xs-12">
                        <div class="panel-body ">
                            <div class="box box-danger box-padding">
                                <div class="row row-margin">
                                    <div class="col-xs-8 col-xs-offset-1 tipinfo">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-danger">合夥人帳號</button>
                                            </div>
                                            <!-- /btn-group -->
                                            <input type="text" class="form-control" name="partnerName">
                                        </div>

                                    </div>
                                </div>
                                <div class="row row-margin">
                                    <div class="col-xs-8 col-xs-offset-1 tipinfo">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-danger">合夥人手機</button>
                                            </div>
                                            <!-- /btn-group -->
                                            <input type="text" class="form-control" name="phone">
                                        </div>

                                    </div>
                                </div>
                                <div class="row row-margin">
                                    <div class="col-xs-8 col-xs-offset-1 tipinfo">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-danger">真實名稱</button>
                                            </div>
                                            <!-- /btn-group -->
                                            <input type="text" class="form-control" name="realName">
                                        </div>
                                    </div>
                                </div>
                                <div class="row row-margin">
                                    <div class="col-xs-8 col-xs-offset-1 tipinfo">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-danger">所屬級別</button>
                                            </div>
                                            <!-- /btn-group -->
                                            <select class="form-control" name="partnerLevelId">
                                                <option value="1">市級合夥人</option>
                                                <option value="2">生活館關注</option>
                                                <option value="3">VIP合夥人</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row row-margin">
                                    <div class="col-xs-8 col-xs-offset-1 tipinfo">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-danger">上級合夥人</button>
                                            </div>
                                            <!-- /btn-group -->
                                            <select name="parentPartnerId" class="form-control">
                                                <OPTION value="0">無</OPTION>
                                                <c:forEach items="${parentPartnerList}" var="parentPartner">
                                                    <option value="${parentPartner.partnerId}">${parentPartner.partnerName}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                        <div class="row row-margin">
                                    <div class="col-xs-8 col-xs-offset-1 tipinfo">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-danger">投資金額</button>
                                            </div>
                                            <!-- /btn-group -->
                                            <input type="text" class="form-control" name="joinFee" placeholder="元">
                                        </div>
                                    </div>
                                </div>
                                <div class="row row-margin">
                                    <div class="col-xs-5  col-xs-offset-4">
                                        <button type="button" class="btn btn-default "
                                            onClick="goback();">返回</button>
                                        &nbsp&nbsp
                                        <button type="button" class="btn btn-primary btn-danger"
                                            id="submit1">提交</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </form>

 

 

 

3.加載驗證器

在頁面加載完整以後，經過以下js代碼加載驗證器。

$(function() {
    $('#thisForm').formValidation({
        message : 'This value is not valid',
        icon : {
            valid : 'glyphicon glyphicon-ok',
            invalid : 'glyphicon glyphicon-remove',
            validating : 'glyphicon glyphicon-refresh'
        },
        fields : {
            partnerName : {
                message : '合夥人名稱驗證不經過',
                validators : {
                    notEmpty : {
                        message : '不能爲空'
                    },
                /*
                 * stringLength: { min: 6, max: 30, message: 'The username must
                 * be more than 6 and less than 30 characters long' },
                 */
                /*
                 * remote: { url: 'remote.php', message: 'The username is not
                 * available' },
                 */
                /*
                 * regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: 'The username
                 * can only consist of alphabetical, number, dot and underscore' }
                 */
                }
            },
            realName : {
                validators : {
                    notEmpty : {
                        message : '不能爲空'
                    },
                }
            },
            phone : {
                validators : {
                    notEmpty : {
                        message : '不能爲空'
                    },
                    phone : {
                        message : '不是有效的電話號碼',
                        country:'CN'
                    },
                     remote: {
                                type: 'POST',
                                url: 'partnerByPhone',
                                message: '該號碼已經存在',
                                // delay: 1000
                            }
                }
            },
             joinFee: {
                        validators: {
                            notEmpty: {
                                message:'不能爲空'
                                },
                            digits: {
                                message:'不是有效的金額'
                                },
                            greaterThan: {
                                value: 0
                            },
                   
                        }
                    }
        }
    })
});

相信很容易就能夠看懂上述驗證器的邏輯，就是一個封裝好的json對象，以表單的name做爲鍵，對每個表單規定驗證規則，以及驗證失敗後輸出的message。以上列出了幾種常見的驗證規則，若是想要更多驗證規則，能夠從下載的文件中去找尋demo.

這裏再列出一些比較有用的驗證規則，都是我從demo上面摘抄下來的。

--長度要求和正則表達式

   username: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: 'The username is required and can\'t be empty'
                            },
                            stringLength: {
                                min: 6,
                                max: 30,
                                message: 'The username must be more than 6 and less than 30 characters long'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: 'The username can only consist of alphabetical, number, dot and underscore'
                            }
                        }
                    },

--email:

 email: {
                        validators: {
                            notEmpty: {
                                message: 'The email address is required and can\'t be empty'
                            },
                            emailAddress: {
                                message: 'The input is not a valid email address'
                            }
                        }
                    },

--電話

      phone: {
                    validators: {
                        notEmpty: {
                            message: '不能爲空'
                        },
                        phone:{
                             message: '不是合法電話',
                             country:'CN'
                        }
              
                }
            }

--網站

 website: {
                        validators: {
                            uri: {
                                message: 'The input is not a valid URL'
                            }
                        }
                    }

--郵編

  zipCode: {
                        validators: {
                            zipCode: {
                                country: 'CN',//中國郵編
                                message: 'The input is not a valid US zip code'
                            }
                        }
                    }

--密碼及確認

      password: {
                        validators: {
                            notEmpty: {
                                message: 'The password is required and can\'t be empty'
                            }
                        }
                    },
                    confirmPassword: {
                        validators: {
                            notEmpty: {
                                message: 'The confirm password is required and can\'t be empty'
                            },
                            identical: {
                                field: 'password',
                                message: 'The password and its confirm are not the same'
                            }
                        }
                    },

--數字

   age: {
                        validators: {
                            notEmpty: {},
                            digits: {},
                            greaterThan: {
                                value: 18
                            },
                            lessThan: {
                                value: 100
                            }
                        }
                    },

 --整數

  'limitPromotion.stock': {
                        validators: {
                            notEmpty: {
                                message:'不能爲空'
                                },
                               regexp: {
                                regexp: /^([0-9][0-9]*)$/,
                                message: '必須爲整數'
                            }
                   
                        }
             },

 --日期

'employee.birthday' : {
                message : '表單校驗失敗',
                validators : {
                    notEmpty : {
                        message : '不能爲空'
                    },
                    //日期格式
                     date: {
                                format: 'YYYY-MM-DD hh:mm:ss',
                                message : '不是合法的日期'
                            }
                }
            },

 

--遠程調用

  username: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: 'The username is required and can\'t be empty'
                            },
                            remote: {
                                type: 'POST',
                                url: 'partnerByPhone',
                                message: '電話號碼已使用',
                                //delay: 1000
                            }
                        }
                    }

關於遠程調用就是須要去訪問服務端的接口，來驗證輸入的表單是否有效，常常出現的場景是咱們須要驗證一個用戶名是否已經被註冊過了。該遠程調用返回的響應是一個json的數據，若是是{ 「valid」: true }表示經過驗證，不然{ 「valid」: false}表示驗證失敗。

其中服務端的代碼示例以下：

    @ResponseBody
    @RequestMapping("partnerByPhone")
    public Map<String, Object> partnerByPhone(String phone) {
        TPartner partner = partnerService.getPartnerByPhone(phone);
        Map<String, Object> maps = new HashMap<String, Object>();
        if (partner == null) {
            maps.put("valid", true);
        } else {
            maps.put("valid", false);
        }
        return maps;
    }

 

4.提交表單時候手動調用驗證

通常狀況下，當咱們提交表單的時候，須要手動調用驗證，能夠用以下代碼來實現。針對上述表單。

  $("#submit1").click(function() { var $form = $("#thisForm"); var bv = $form.data('formValidation'); bv.validate(); if(bv.isValid()){ $.ajax({ type:'post', url:'partnerSave', data:$('#thisForm').serialize(), dataType:'html', success:function(data){ if(data>0){ alert("成功"); location.href="partnerHome"; }else{ alert("失敗"); } } }); } });

怎麼樣，就是這麼簡單。咱們來看看效果吧。固然提示錯誤的語言和一些標籤的樣式你能夠本身去修改。

 

 

 

 總的來講，這仍是一款比較容易上手的驗證器，有須要的朋友能夠嘗試一下。