index.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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html >
< head >
< meta  http-equiv = "Content-Type"  content = "text/html; charset=UTF-8" >
< title >Insert title here</ title >
< script  type = "text/javascript"  src = "jquery-1.9.0.js" ></ script >
< script  type = "text/javascript"  src = "jquery.validate.min.js" ></ script >
 
< script  type = "text/javascript" >
     // add the customized method 
     $.validator.addMethod("test",function(value,element,params){
         var flag = false;
         if(typeof(value)!=null&&parseInt(value)>10){
             flag = true;
         }
         return this.optional(element) || flag;
     },"the input value must be larger that 10");
 
 
     $(function(){
         $("#form").validate({
             submitHandler: function(form) {
                 alert("pass ... ");
             },
             rules: {
                 username: {
                     required:true
                 },
                 password:{
                     required:true,
                     minlength:6
                 },
                 email:{
                     required:true,
                     email:true
                 },
                 testField:{
                     required:true,
                     test:true
                 }
             },
             messages: {
                 username: {
                     required:"please input the username"
                 },
                 password:{
                     required:"please input the password",
                     minlength:"the password must be six characters at least"
                 },
                 email:{
                     required:"please input the email",
                     email:"the email format is wrong!"
                 },
                 testField:{
                     required:"please input the testField",
                 }
 
             }//end messages
         });
     });
</ script >
</ head >
< body >
     < form  id = "form" >
         < div >
             < label >username</ label >
             < input  name = "username"  type = "text"  />
         </ div >
         < div >
             < label >password</ label >
             < input  name = "password"  type = "text"  />
         </ div >
         < div >
             < label >email</ label >
             < input  name = "email"  type = "text"  />
         </ div >
         < div >
             < label >test field</ label >
             < input  name = "testField"  type = "text"  />
         </ div >
         < div >
             < input  type = "submit"  value = "submit"  />
         </ div >
     </ form >
</ body >
</ html >