Skip to content
This repository was archived by the owner on Dec 25, 2017. It is now read-only.

Commit d6fd885

Browse files
kazuponkazupon
committed
📝 docs(gitbook): add error messages section
1 parent fde2233 commit d6fd885

File tree

3 files changed

+401
-0
lines changed

3 files changed

+401
-0
lines changed

‎docs/en/started.html

Lines changed: 339 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
1+
2+
<!DOCTYPE HTML>
3+
<html lang="en" >
4+
<head>
5+
<title>Getting Started · GitBook</title>
6+
<meta charset="UTF-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
8+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
9+
<meta name="description" content="">
10+
<meta name="generator" content="GitBook 3.2.0">
11+
12+
13+
14+
15+
<link rel="stylesheet" href="../gitbook/style.css">
16+
17+
18+
19+
20+
<link rel="stylesheet" href="../gitbook/gitbook-plugin-advanced-emoji/emoji-website.css">
21+
22+
23+
24+
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
25+
26+
27+
28+
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
29+
30+
31+
32+
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
33+
34+
35+
36+
37+
38+
39+
40+
41+
42+
43+
44+
45+
46+
47+
48+
49+
50+
51+
52+
53+
54+
55+
56+
<meta name="HandheldFriendly" content="true"/>
57+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
58+
<meta name="apple-mobile-web-app-capable" content="yes">
59+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
60+
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
61+
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
62+
63+
64+
65+
<link rel="prev" href="installation.html" />
66+
67+
68+
</head>
69+
<body>
70+
71+
<div class="book">
72+
<div class="book-summary">
73+
74+
75+
<div id="book-search-input" role="search">
76+
<input type="text" placeholder="Type to search" />
77+
</div>
78+
79+
80+
<nav role="navigation">
81+
82+
83+
84+
<ul class="summary">
85+
86+
87+
88+
89+
90+
91+
92+
93+
94+
<li class="chapter " data-level="1.1" data-path="./">
95+
96+
<a href="./">
97+
98+
99+
Introduction
100+
101+
</a>
102+
103+
104+
105+
</li>
106+
107+
<li class="chapter " data-level="1.2" data-path="installation.html">
108+
109+
<a href="installation.html">
110+
111+
112+
Installation
113+
114+
</a>
115+
116+
117+
118+
</li>
119+
120+
<li class="chapter active" data-level="1.3" data-path="started.html">
121+
122+
<a href="started.html">
123+
124+
125+
Getting Started
126+
127+
</a>
128+
129+
130+
131+
</li>
132+
133+
134+
135+
136+
<li class="divider"></li>
137+
138+
<li>
139+
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
140+
Published with GitBook
141+
</a>
142+
</li>
143+
</ul>
144+
145+
146+
</nav>
147+
148+
149+
</div>
150+
151+
<div class="book-body">
152+
153+
<div class="body-inner">
154+
155+
156+
157+
<div class="book-header" role="navigation">
158+
159+
160+
<!-- Title -->
161+
<h1>
162+
<i class="fa fa-circle-o-notch fa-spin"></i>
163+
<a href="." >Getting Started</a>
164+
</h1>
165+
</div>
166+
167+
168+
169+
170+
<div class="page-wrapper" tabindex="-1" role="main">
171+
<div class="page-inner">
172+
173+
<div id="book-search-results">
174+
<div class="search-noresults">
175+
176+
<section class="normal markdown-section">
177+
178+
<h1 id="getting-started">Getting Started</h1><h2 id="basic-usage">Basic Usage</h2><p>As the basic usage of validation, you can use the target element with <code>validity</code> wrap component, as follows:</p><h3 id="html">HTML</h3><pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span>
179+
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;username&quot;</span>&gt;</span>username:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
180+
<span class="hljs-tag">&lt;<span class="hljs-name">validity</span> <span class="hljs-attr">field</span>=<span class="hljs-string">&quot;username&quot;</span> <span class="hljs-attr">:validators</span>=<span class="hljs-string">&quot;{ required: true, minlength: 4 }&quot;</span>&gt;</span>
181+
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> @<span class="hljs-attr">input</span>=<span class="hljs-string">&quot;handleValidate&quot;</span> @<span class="hljs-attr">focusout</span>=<span class="hljs-string">&quot;handleValidate&quot;</span>&gt;</span>
182+
<span class="hljs-tag">&lt;/<span class="hljs-name">validity</span>&gt;</span>
183+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;errors&quot;</span>&gt;</span>
184+
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;required&quot;</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;result.required&quot;</span>&gt;</span>required username!!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
185+
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;minlength&quot;</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;result.minlength&quot;</span>&gt;</span>too short username!!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
186+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
187+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
188+
<h3 id="javascript">JavaScript</h3><pre><code class="lang-javascript"><span class="hljs-keyword">new</span> Vue({
189+
data: {
190+
result: {}
191+
},
192+
methods: {
193+
handleValidate: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{
194+
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>
195+
<span class="hljs-comment">// refer validity instance from target element</span>
196+
<span class="hljs-keyword">var</span> $validity = e.target.$validity
197+
$validity.validate(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
198+
self.result = $validity.result
199+
})
200+
}
201+
}
202+
}).$mount(<span class="hljs-string">&apos;#app&apos;</span>)</code></pre>
203+
<p>The validation results can get the <code>result</code> property from <code>validity</code> object. In above case, the <code>validity</code> object refer from <code>target</code> element of event, and run the validation with call <code>validate</code> method of <code>validity</code> object, then validity result refer from <code>result</code> property of <code>validity</code> object. This is a little similar the validation how to HTML5 form validation (Constraint validation API).</p><blockquote><p><img align="absmiddle" alt=":pencil:" class="emoji" src="gitbook/gitbook-plugin-advanced-emoji/emojis/pencil.png" title=":pencil:"> NOTE: You can also refer <code>validity</code> object with using <code>ref</code> special attribute on <code>validity</code> wrap component.</p></blockquote><h2 id="more-convenience-usage">More Convenience Usage</h2><p>As the more convenience usage of validation, you can wrap the <code>validity</code> wrap component with <code>validation</code> wrap component, as follows:</p><h3 id="html">HTML</h3><pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span>
204+
<span class="hljs-comment">&lt;!-- wrap validity component --&gt;</span>
205+
<span class="hljs-tag">&lt;<span class="hljs-name">validation</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;validation1&quot;</span>&gt;</span>
206+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;username&quot;</span>&gt;</span>
207+
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;username&quot;</span>&gt;</span>username:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
208+
<span class="hljs-comment">&lt;!-- validity component wrapped with it --&gt;</span>
209+
<span class="hljs-tag">&lt;<span class="hljs-name">validity</span> <span class="hljs-attr">field</span>=<span class="hljs-string">&quot;username&quot;</span> <span class="hljs-attr">:validators</span>=<span class="hljs-string">&quot;[&apos;required&apos;]&quot;</span>&gt;</span>
210+
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;username&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> @<span class="hljs-attr">input</span>=<span class="hljs-string">&quot;handleValidate&quot;</span>&gt;</span>
211+
<span class="hljs-tag">&lt;/<span class="hljs-name">validity</span>&gt;</span>
212+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
213+
214+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;password&quot;</span>&gt;</span>
215+
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;password&quot;</span>&gt;</span>password:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
216+
<span class="hljs-comment">&lt;!-- validity component wrapped with it --&gt;</span>
217+
<span class="hljs-tag">&lt;<span class="hljs-name">validity</span> <span class="hljs-attr">field</span>=<span class="hljs-string">&quot;password&quot;</span> <span class="hljs-attr">:validators</span>=<span class="hljs-string">&quot;{ minlength: 8, required: true }&quot;</span>&gt;</span>
218+
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;password&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;password&quot;</span> @<span class="hljs-attr">input</span>=<span class="hljs-string">&quot;handleValidate&quot;</span>&gt;</span>
219+
<span class="hljs-tag">&lt;/<span class="hljs-name">validity</span>&gt;</span>
220+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
221+
222+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;confirm&quot;</span>&gt;</span>
223+
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;confimr&quot;</span>&gt;</span>password (confirm):<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
224+
<span class="hljs-comment">&lt;!-- validity component wrapped with it --&gt;</span>
225+
<span class="hljs-tag">&lt;<span class="hljs-name">validity</span> <span class="hljs-attr">field</span>=<span class="hljs-string">&quot;confirm&quot;</span> <span class="hljs-attr">:validators</span>=<span class="hljs-string">&quot;{ minlength: 8, required: true }&quot;</span>&gt;</span>
226+
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;confirm&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;password&quot;</span> @<span class="hljs-attr">input</span>=<span class="hljs-string">&quot;handleValidate&quot;</span>&gt;</span>
227+
<span class="hljs-tag">&lt;/<span class="hljs-name">validity</span>&gt;</span>
228+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
229+
230+
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;send&quot;</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;valid&quot;</span>&gt;</span>
231+
232+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;errors&quot;</span>&gt;</span>
233+
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;username-invalid&quot;</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;usernameInvalid&quot;</span>&gt;</span>Invalid yourname inputting !!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
234+
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;password-invalid&quot;</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;passwordInvalid&quot;</span>&gt;</span>Invalid password inputting !!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
235+
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;confirm-invalid&quot;</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;confirmInvalid&quot;</span>&gt;</span>Invalid confirm password inputting !!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
236+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
237+
<span class="hljs-tag">&lt;/<span class="hljs-name">validation</span>&gt;</span>
238+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
239+
<h3 id="javascript">JavaScript</h3><pre><code class="lang-javascript"><span class="hljs-keyword">new</span> Vue({
240+
computed: VueValidator.mapValidation({
241+
valid: <span class="hljs-string">&apos;$validation.validation1.valid&apos;</span>,
242+
usernameInvalid: <span class="hljs-string">&apos;$validation.validation1.username.invalid&apos;</span>,
243+
passwordInvalid: <span class="hljs-string">&apos;$validation.validation1.password.invalid&apos;</span>,
244+
confirmInvalid: <span class="hljs-string">&apos;$validation.validation1.confirm.invalid&apos;</span>
245+
}),
246+
methods: {
247+
handleValidate: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{
248+
e.target.$validity.validate()
249+
}
250+
}
251+
}).$mount(<span class="hljs-string">&apos;#app&apos;</span>)</code></pre>
252+
<p>By the wrapping <code>validation</code> wrap component, validation results for each <code>validity</code> wrap component is stored to <code>$validation</code> property of Vue instance.</p><p>These validation results can refer with specified the key to <code>name</code> property of <code>validation</code> wrap component. However, In above case, since the key path becomes longer, we provide the helper called <code>mapValidation</code> function. This is a similar the validation how to previous <code>2.x</code> version.</p>
253+
254+
</section>
255+
256+
</div>
257+
<div class="search-results">
258+
<div class="has-results">
259+
260+
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
261+
<ul class="search-results-list"></ul>
262+
263+
</div>
264+
<div class="no-results">
265+
266+
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
267+
268+
</div>
269+
</div>
270+
</div>
271+
272+
</div>
273+
</div>
274+
275+
</div>
276+
277+
278+
279+
<a href="installation.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: Installation">
280+
<i class="fa fa-angle-left"></i>
281+
</a>
282+
283+
284+
285+
286+
</div>
287+
288+
<script>
289+
var gitbook = gitbook || [];
290+
gitbook.push(function() {
291+
gitbook.page.hasChanged({"page":{"title":"Getting Started","level":"1.3","depth":1,"previous":{"title":"Installation","level":"1.2","depth":1,"path":"installation.md","ref":"installation.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","github","advanced-emoji@0.2.1"],"root":"./","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"github":{"url":"https://github.com/vuejs/vue-validator/"},"livereload":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"fontsettings":{"theme":"white","family":"sans","size":2},"highlight":{},"advanced-emoji":{"embedEmojis":false},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Edit This Page","base":"https://github.com/vuejs/vue-validator/tree/dev/gitbook"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"language":"en","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"*"},"file":{"path":"started.md","mtime":"2016-12-29T17:58:41.000Z","type":"markdown"},"gitbook":{"version":"3.2.0","time":"2016-12-29T16:08:54.292Z"},"basePath":".","book":{"language":"en"}});
292+
});
293+
</script>
294+
</div>
295+
296+
297+
<script src="../gitbook/gitbook.js"></script>
298+
<script src="../gitbook/theme.js"></script>
299+
300+
301+
<script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script>
302+
303+
304+
305+
<script src="../gitbook/gitbook-plugin-github/plugin.js"></script>
306+
307+
308+
309+
<script src="../gitbook/gitbook-plugin-livereload/plugin.js"></script>
310+
311+
312+
313+
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
314+
315+
316+
317+
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
318+
319+
320+
321+
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
322+
323+
324+
325+
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
326+
327+
328+
329+
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
330+
331+
332+
333+
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
334+
335+
336+
337+
</body>
338+
</html>
339+

‎gitbook/en/SUMMARY.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@
1212
- [Reset Validation Results](reset.md)
1313
- [Form Validatable elements](elements.md)
1414
- [Grouping](grouping.md)
15+
- [Error Messages](errors.md)

0 commit comments

Comments
 (0)