UNPKG

8.89 kBHTMLView Raw
1<!doctype html>
2<html class="no-js" lang="">
3<head>
4 <meta charset="utf-8">
5 <meta http-equiv="x-ua-compatible" content="ie=edge">
6 <title>Vue dotnet validator example</title>
7 <meta name="description" content="">
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <style>
10 label {
11 display: block;
12 }
13 label span {
14 display: inline-block;
15 width: 200px;
16 }
17 .message {
18 color: red;
19 }
20 </style>
21</head>
22<body>
23<div id="example-site">
24 <vue-dotnet-validator-group inline-template>
25 <form asp-controller="Account" asp-action="Register" method="post" v-on:submit="validate">
26 <validator inline-template>
27 <div>
28 <label>
29 <span asp-validation-for="LastName" ref="message" class="message"></span>
30 <span>Radio button 1</span>
31 <input name="radio1" type="radio" value="number1" asp-for="Radio1" ref="field" v-model="val" data-val-required="This field is required" />
32 </label>
33 <label>
34 <span asp-validation-for="LastName" ref="message" class="message"></span>
35 <span>Radio button 2</span>
36 <input name="radio1" type="radio" value="number2" asp-for="Radio1" ref="field" v-model="val" data-val-required="This field is required" />
37 </label>
38 </div>
39 </validator>
40
41 <validator inline-template>
42 <div>
43 <label>
44 <span asp-validation-for="checkbox1" ref="message" class="message"></span>
45 <span>Checkbox 1 (required, has to be true)</span>
46 <input name="checkbox1" type="checkbox" value="true" asp-for="checkbox1" ref="field" data-val-istrue="This field must be true" data-val-required="This field is required" />
47 </label>
48 </div>
49 </validator>
50
51 <validator :value="true" inline-template>
52 <div>
53 <label>
54 <span asp-validation-for="checkbox2" ref="message" class="message"></span>
55 <span>Checkbox 2 (default checked, required, has to be true)</span>
56 <input name="checkbox2" type="checkbox" value="true" asp-for="checkbox2" ref="field" data-val-istrue="This field must be true" data-val-required="This field is required" checked="checked" />
57 </label>
58 </div>
59 </validator>
60
61 <validator value="false" inline-template>
62 <div>
63 <label>
64 <span asp-validation-for="checkbox3" ref="message" class="message"></span>
65 <span>Checkbox 3 (can be false)</span>
66 <input name="checkbox3" type="checkbox" value="false" asp-for="checkbox3" ref="field" data-val-required="This field is required" />
67 </label>
68 </div>
69 </validator>
70
71 <validator inline-template>
72 <label>
73 <span asp-validation-for="LastName" ref="message" class="message"></span>
74 <span>Required validator</span>
75 <input name="field1" type="text" asp-for="LastName" ref="field" v-model="val" data-val-required="This field is required" />
76 </label>
77 </validator>
78
79 <validator inline-template>
80 <label>
81 <span asp-validation-for="LastName" ref="message" class="message"></span>
82 <span>Maximum length validator</span>
83 <input name="field2" type="text" asp-for="ShortName" ref="field" v-model="val" data-val-maxlength="You can only use less then 10 characters" data-val-maxlength-max="10" />
84 </label>
85 </validator>
86
87 <validator inline-template>
88 <label>
89 <span asp-validation-for="LastName" ref="message" class="message"></span>
90 <span>Range validator</span>
91 <input name="field3" type="text" asp-for="RangeTest" ref="field" v-model="val" data-val-range="You should use a number between 3 and 5" data-val-range-min="3" data-val-range-max="5"/>
92 </label>
93 </validator>
94
95 <validator inline-template>
96 <label>
97 <span asp-validation-for="LastName" ref="message" class="message"></span>
98 <span>Required range validator</span>
99 <input name="field4" type="text" asp-for="RangeTest" ref="field" v-model="val" data-val-range="You should use a number between 3 and 5" data-val-range-min="3" data-val-range-max="5" data-val-required="This field is required"/>
100 </label>
101 </validator>
102
103
104 <validator value="Predefined value" inline-template>
105 <label>
106 <span asp-validation-for="LastName" ref="message" class="message"></span>
107 <span>Custom validator</span>
108 <input name="field5" type="text" asp-for="RangeTest" ref="field" v-model="val" data-val-mycustomvalidator="Value should be 'Hello'"/>
109 </label>
110 </validator>
111
112
113 <test-component inline-template>
114 <validator v-model="inputValue" inline-template>
115 <label>
116 <span asp-validation-for="LastName" ref="message" class="message"></span>
117 <span>Custom component container validator</span>
118 <input name="field6" type="text" asp-for="RangeTest" ref="field" v-model="val" data-val-mycustomvalidator="Value should be 'Hello'"/>
119 </label>
120 </validator>
121 </test-component>
122
123 <validator value="value from server" inline-template>
124 <label>
125 <span asp-validation-for="stuff" ref="message" class="message">Message from server!</span>
126 <span>Server side message</span>
127 <input name="field6" type="text" asp-for="stuff" ref="field" v-model="val" data-val-required="This value is required."/>
128 </label>
129 </validator>
130
131 <validator value="" inline-template>
132 <label>
133 <span asp-validation-for="stuff" ref="message" class="message"></span>
134 <span>Equal to</span>
135 <input name="field7" type="text" asp-for="stuff" ref="field" v-model="val" data-val-required="This value is required." data-val-equalto="Must be equal to the next input!" data-val-equalto-other="*.field8"/>
136 </label>
137 </validator>
138
139 <validator value="" inline-template>
140 <label>
141 <span asp-validation-for="stuff" ref="message" class="message"></span>
142 <span>Equal to</span>
143 <input name="field8" type="text" asp-for="stuff" ref="field" v-model="val" data-val-required="This value is required." data-val-equalto="Must be equal to the previous input!" data-val-equalto-other="*.field7"/>
144 </label>
145 </validator>
146
147 <validator validation-style="after-change" inline-template>
148 <label>
149 <span asp-validation-for="stuff" ref="message" class="message"></span>
150 <span>After change</span>
151 <input name="field9" type="text" asp-for="stuff" ref="field" v-model="val" data-val-required="This value is required."/>
152 </label>
153 </validator>
154
155 <validator validation-style="after-blur" inline-template>
156 <label>
157 <span asp-validation-for="stuff" ref="message" class="message"></span>
158 <span>After blur</span>
159 <input name="field10" type="text" asp-for="stuff" ref="field" v-model="val" data-val-required="This value is required."/>
160 </label>
161 </validator>
162
163 <validator inline-template>
164 <label>
165 <span asp-validation-for="LastName" ref="message" class="message"></span>
166 <span>Async validator</span>
167 <test-async-component inline-template>
168 <input name="field11" type="text" ref="field" v-model="$parent.val" data-val-required="This value is required."/>
169 </test-async-component>
170 </label>
171 </validator>
172
173 <button type="submit">Register</button>
174 </form>
175 </vue-dotnet-validator-group>
176</div>
177
178<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
179<script src="./dist/example.js"></script>
180</body>
181</html>