The need for client-side validation--jquery.validator

Recently in doing a user registration login page, the data search process found a very good client authentication for the Acura-jquery.validate.
It is a plugin of the famous JavaScript package jquery, in fact it has some other plug-ins should be cool, waiting to learn slowly

Official address: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jquery User's Manual: Http://jquery.org.cn/visual/cn/index.xml

Development is very simple and straightforward to use.
My Code:

Java code

2. $ (document). Ready (function () {
6. /* Set default Properties */
8. $.validator.setdefaults ({
10. Submithandler:function (form) {Form.submit ();}
12. });
14. Chinese characters two bytes
16. JQuery.validator.addMethod ("Byterangelength", function (value, element, param) {
18. var length = Value.length;
20. For (var i = 0; i < value.length; i++) {
22. if (value.charcodeat (i) > 127) {
24. length++;
26. }
28. }
30. return this.optional (element) | |   (length >= param[0] && length <= param[1]);
32. }, "Make sure the value entered is between 3-15 bytes (2 bytes in one text)");
36. /* Append a custom validation method */
38. Identification Number Verification
40. JQuery.validator.addMethod ("Isidcardno", function (value, Element) {
42. return this.optional (element) | | Isidcardno (value);
44. }, "Please enter your ID number correctly");
48. Character verification
50. JQuery.validator.addMethod ("UserName", function (value, Element) {
52. return this.optional (element) | |/^[\u0391-\uffe5\w]+$/.test (value);
54. }, "User name can only include Chinese characters, English letters, numbers and underscores";
58. Mobile phone number Verification
60. JQuery.validator.addMethod ("IsMobile", function (value, Element) {
62. var length = Value.length;
64. return this.optional (element) | | (length = = &&/^ (((13[0-9]{1}) | (   15[0-9]{1})) +\d{8}) $/.test (value));
66. }, "Please fill in your mobile phone number correctly");
70. Phone number Verification
72. JQuery.validator.addMethod ("Isphone", function (value, Element) {
74. var tel =/^ (\d{3,4}-?)?   \d{7,9}$/g;
76. return this.optional (element) | |   (Tel.test (value));
78. }, "Please fill in your phone number correctly");
82. ZIP Code Verification
84. JQuery.validator.addMethod ("Iszipcode", function (value, Element) {
86. var tel =/^[0-9]{6}$/;
88. return this.optional (element) | |   (Tel.test (value));
90. }, "Please fill in your zip code correctly");
92. $ (regfrom). Validate ({
94. /* Set validation rules */
96. Rules: {
98. UserName: {
100. Required: true,
102. UserName: True,
104. Byterangelength: [3,]
106. },
108. Password: {
110. Required: true,
112. MinLength: 5
114. },
116. Repassword: {
118. Required: true,
120. MinLength: 5,
122. Equalto: "#password"
124. },
126. Question: {
128. Required: true
130. },
132. Answer: {
134. Required: true
136. },
138. Realname: {
140. Required: true
142. },
144. Cardnumber: {
146. Isidcardno: True
148. },
150. Mobilephone: {
152. IsMobile: True
154. },
156. Phone: {
158. Isphone: True
160. },
162. Email: {
164. Required: true,
166. Email: true
168. },
170. ZipCode: {
172. Iszipcode:True
174. }
176. },
178. /* SET error message */
180. Messages: {
182. UserName: {
184. Required: "Please fill in the user name",
186. Byterangelength: "User name must be between 3-15 characters (2 characters in one text)"
188. },
190. Password: {
192. Required: "Please fill in the password",
194. Minlength:jQuery.format ("input {0}.")
196. },
198. Repassword: {
200. Required: "Please fill in the confirmation password",
202. Equalto: "two times password input is not the same"
204. },
206. Question: {
208. Required: "Please fill in your password prompt question"
210. },
212. Answer: {
214. Required: "Please fill in your password prompt answer"
216. },
218. Realname: {
220. Required: "Please fill in your real name"
222. },
224. Email: {
226. Required: "Please enter an email address",
228. Email: "Please enter a valid email address"
230. }
232. },
234. /* Where error message is displayed */
236. Errorplacement:function (Error, Element) {
238. Error.appendto (Element.parent ());
240. },
242. /* Processing when validation passes */
244. Success:function (label) {
246. //Set as text for IE
248. Label.html (""). AddClass ("checked");
250. },
252. /* Do not verify when getting focus */
254. Focusinvalid: false,
256. OnKeyUp: false
258. });
262. When the input box gets focus, the style setting
264. $ (' input '). focus (function () {
266. if ($ (this). Was (": Text") | | $ (This). Is (":p assword"))
268. $ (this). addclass (' focus ');
270. if ($ (this). Hasclass (' Have_tooltip ')) {
272. $ (this). Parent (). Parent ().removeclass ('field_normal '). addclass (' field_focus ');
274. }
276. });
280. Style settings when the input box loses focus
282. $ (' input '). blur (function () {
284. $ (this). Removeclass (' focus ');
286. if ($ (this). Hasclass (' Have_tooltip ')) {
288. $ (this). Parent (). Parent ().removeclass ('field_focus '). addclass (' field_normal ');
290. }
292. });
294. });

Online information Some people say that it has a conflict with the prototype package, I have not used at the same time, this is not very clear, but I have found a problem:
For the minimum/large length of the verification method, the author may consider that everyone's naming habits are different, at the same time do the minlength and MinLength (MaxLength and MaxLength) methods, which should be possible, but for the user message, can only be defined for minlength (maxlength) to invoke a user-defined message,
Otherwise, it simply calls the package's default message, but the exact reason is not yet known. At the same time, this plugin provides localized messages, but for beginners here, how to use it still needs to be explored!

The need for client-side validation--jquery.validator