forked from cocoo/easyui-bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvalidatebox.html
142 lines (130 loc) · 10.7 KB
/
validatebox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>validatebox</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">
<h3>ValidateBox</h3>
<p>Override defaults with $.fn.validatebox.defaults.</p>
<p>
The validatebox is designed to validate the form input fields.
If users enter invalid values, it will change the background color, display the alarm icon and a tooltip message.
The validatebox can be integrated with form plugin and will prevent invalid fields from submission.
</p>
<img src="images/validatebox.png">
<h4>Usage</h4>
<p>Create validatebox from markup.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"vv"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-validatebox"</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"required:true,validType:'email'"</span><span> </span><span class="tag">/></span><span> </span></span></li></ol></div><textarea class="html" name="code-validatebox" style="display: none;"> <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />
</textarea>
<p>Create validatebox using javascript.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"vv"</span><span> </span><span class="tag">/></span><span> </span></span></li></ol></div><textarea class="html" name="code-validatebox" style="display: none;"> <input id="vv" />
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#vv'</span><span>).validatebox({ </span></span></li><li class=""><span> required: <span class="keyword">true</span><span>, </span></span></li><li class="alt"><span> validType: <span class="string">'email'</span><span> </span></span></li><li class=""><span>}); </span></li></ol></div><textarea class="js" name="code-validatebox" style="display: none;"> $('#vv').validatebox({
required: true,
validType: 'email'
});
</textarea>
<p>To check password and retype password are same.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span class="comment">// extend the 'equals' rule</span><span> </span></span></li><li class=""><span>$.extend($.fn.validatebox.defaults.rules, { </span></li><li class="alt"><span> equals: { </span></li><li class=""><span> validator: <span class="keyword">function</span><span>(value,param){ </span></span></li><li class="alt"><span> <span class="keyword">return</span><span> value == $(param[0]).val(); </span></span></li><li class=""><span> }, </span></li><li class="alt"><span> message: <span class="string">'Field do not match.'</span><span> </span></span></li><li class=""><span> } </span></li><li class="alt"><span>}); </span></li></ol></div><textarea class="js" name="code-validatebox" style="display: none;"> // extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function(value,param){
return value == $(param[0]).val();
},
message: 'Field do not match.'
}
});
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"pwd"</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"pwd"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"password"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-validatebox"</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"required:true"</span><span> </span><span class="tag">/></span><span> </span></span></li><li class=""><span><span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"rpwd"</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"rpwd"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"password"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-validatebox"</span><span> </span></span></li><li class="alt"><span> <span class="attribute">required</span><span>=</span><span class="attribute-value">"required"</span><span> </span><span class="attribute">validType</span><span>=</span><span class="attribute-value">"equals['#pwd']"</span><span> </span><span class="tag">/></span><span> </span></span></li></ol></div><textarea class="html" name="code-validatebox" style="display: none;"> <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" />
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
required="required" validType="equals['#pwd']" />
</textarea>
<br>
<h4>Validate Rule</h4>
<p>The validate rule is defined by using required and validType property, here are the rules already implemented:</p>
<ul>
<li>email: Match email regex rule.</li>
<li>url: Match URL regex rule.</li>
<li>length[0,100]: Between x and x characters allowed.</li>
<li>remote['http://.../action.do','paramName']: Send ajax request to do validate value, return 'true' when successfully.</li>
</ul>
<p>To custom validate rule, override $.fn.validatebox.defaults.rules that defines a validator function and invalid message.
For example, to define a minLength valid type:</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$.extend($.fn.validatebox.defaults.rules, { </span></span></li><li class=""><span> minLength: { </span></li><li class="alt"><span> validator: <span class="keyword">function</span><span>(value, param){ </span></span></li><li class=""><span> <span class="keyword">return</span><span> value.length >= param[0]; </span></span></li><li class="alt"><span> }, </span></li><li class=""><span> message: <span class="string">'Please enter at least {0} characters.'</span><span> </span></span></li><li class="alt"><span> } </span></li><li class=""><span>}); </span></li></ol></div><textarea class="js" name="code-validatebox" style="display: none;"> $.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
</textarea>
<p>Now you can use the minLength validtype to define an input box that should be inputed at least 5 characters:</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-validatebox"</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"validType:'minLength[5]'"</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-validatebox" style="display: none;"> <input class="easyui-validatebox" data-options="validType:'minLength[5]'">
</textarea>
<br>
<h4>Properties</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>required</td>
<td>boolean</td>
<td>Defines if the field should be inputed.</td>
<td>false</td>
</tr>
<tr>
<td>validType</td>
<td>string</td>
<td>Defines the field valid type, such as email, url, etc.</td>
<td>null</td>
</tr>
<tr>
<td>missingMessage</td>
<td>string</td>
<td>Tooltip text that appears when the text box is empty.</td>
<td>This field is required.</td>
</tr>
<tr>
<td>invalidMessage</td>
<td>string</td>
<td>Tooltip text that appears when the content of text box is invalid.</td>
<td>null</td>
</tr>
</tbody></table>
<h4>Methods</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>destroy</td>
<td>none</td>
<td>Remove and destroy the component.</td>
</tr>
<tr>
<td>validate</td>
<td>none</td>
<td>Do the validation to determine whether the content of text box is valid.</td>
</tr>
<tr>
<td>isValid</td>
<td>none</td>
<td>Call validate method and return the validation result, true or false.</td>
</tr>
</tbody></table>
</div>
</body>
</html>