FormValidation 文檔結(jié)構(gòu)
來自官方文檔：
formvalidation/
├── dist
│ ├── css
│ │ └── formValidation(.min).css
│ │
│ └── js
│ ├── framework
│ │ ├── bootstrap(.min).js
│ │ ├── foundation(.min).js
│ │ ├── pure(.min).js
│ │ ├── semantic(.min).js
│ │ └── uikit(.min).js
│ │
│ ├── language
│ │ ├── de_DE.js
│ │ ├── en_US.js
│ │ └── ...
│ │
│ ├── formValidation(.min).js
│ └── formValidation.popular(.min).js
│
└── src
├── css
│ └── formValidation.css
│
└── js
├── framework
│ ├── bootstrap.js
│ ├── foundation.js
│ ├── pure.js
│ ├── semantic.js
│ └── uikit.js
│
├── language
│ ├── de_DE.js
│ ├── en_US.js
│ └── ...
│
├── validator
│ ├── base64.js
│ ├── between.js
│ ├── callback.js
│ └── ...
│
├── base.js // The main plugin source file containing the base class
└── helper.js // Helper class
- 文檔分析：
-
src路徑由原始文件組成描睦，dist路徑則由壓縮的各個(gè)文件組成沼头。 -
src/js/validator路徑由多個(gè)內(nèi)置驗(yàn)證組成，而dist/js/formValidation(.min.).js包含了所有的內(nèi)置驗(yàn)證，dist/js/formValidation。popular(.min.).js只包含大部分流行的驗(yàn)證。 -
src/language和dist/language為語言包
- 語言包的使用
-
加入庫
默認(rèn)的庫包含在了vendor路徑下烈疚，并且jQuery版本要求V1.9.1或以上。<!-- Bootstrap CSS v3.0.0 or higher --> <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css"> <!-- FormValidation CSS file --> <link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css"> <!-- jQuery v1.9.1 or higher --> <script type="text/javascript" src="/vendor/jquery/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="/vendor/bootstrap/js/bootstrap.min.js"></script> <!-- FormValidation plugin and the class supports validating Bootstrap form --> <script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script> <script src="/vendor/formvalidation/dist/js/framework/bootstrap.min.js"></script>值得注意的是：bootstrap官方的
bootstrap(.min.)js與formvalidation官方的bootstrap(.min.)js是兩個(gè)不同的js文件聪轿。 -
寫驗(yàn)證表單
如果你的表單沒有按照規(guī)定格式寫的話爷肝，chrome瀏覽器會(huì)報(bào)錯(cuò)：
<pre>
Uncaught RangeError: Maximum call stack size exceeded
</pre>- 對(duì)于復(fù)雜的表單，要使用
row選項(xiàng) - 但是要注意，不能
submit按鈕使用name="submit"或id="submit"灯抛，否則表單不會(huì)是驗(yàn)證后再提交金赦。
- 對(duì)于復(fù)雜的表單，要使用
-
調(diào)用插件
像下面一樣調(diào)用插件去驗(yàn)證表單：$(document).ready(function() { $(formSelector).formValidation({ // Indicate the framework // Can be bootstrap, foundation, pure, semantic, uikit framework: '...', // Other settings excluded: ..., icon: ..., message: 'This value is not valid', trigger: null, fields: ... }); })例如，驗(yàn)證一個(gè)包含username和password的表單对嚼，應(yīng)該類似如下調(diào)用插件：
$(document).ready(function() {
$('#signinForm').formValidation({
// I am validating Bootstrap form
framework: 'bootstrap',
// Feedback icons
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// List of fields and their validation rules
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required and cannot 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 and underscore'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
}
}
}
}
});
});
```
