jQuery验证框架.doc

jQuery验证框架八、应用实例1 验证页面Html代码 1 2 3 4 jquery验证框架 5 6 7 8 9 10 11 label width: 10em; float: left; 12 label.haha color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url(images/unchecked.gif) no-repeat; 13 input.haha border: 1px solid red; 14 label.valid background: url(images/checked.gif) no-repeat; color: #065FB9; 15 input.focus border: 2px solid green; 16 ul li display: block; 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 jquery验证框架 label width: 10em; float: left; label.haha color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url(images/unchecked.gif) no-repeat; input.haha border: 1px solid red; label.valid background: url(images/checked.gif) no-repeat; color: #065FB9; input.focus border: 2px solid green; ul li display: block; 用户名 密码 验证密码 性别 男女 年龄 邮箱 个人网页 电话 附件 重置 2 验证jsJs代码 78 $(function() 79 var validator = $(#myform).validate( 80 debug: true, /调试模式取消submit的默认提交功能 81 errorClass: haha,/默认为错误的样式类为：error 82 focusInvalid: false, 83 onkeyup: false, 84 submitHandler: function(form) /表单提交句柄,为一回调函数，带一个参数：form 85 alert(提交表单); 86 /form.submit(); 提交表单 87 , 88 rules: /定义验证规则,其中属性名为表单的name属性 89 username: 90 required: true, 91 minlength: 2, 92 remote: uservalid.jsp /传说当中的ajax验证 93 , 94 firstpwd: 95 required: true, 96 /minlength: 6 97 rangelength: 6,8 98 , 99 secondpwd: 100 required: true, 101 equalTo: #password 102 , 103 sex: 104 required: true 105 , 106 age: 107 required: true, 108 range: 0,120 109 , 110 email: 111 required: true, 112 email: true 113 , 114 purl: 115 required: true, 116 url: true 117 , 118 afile: 119 required: true, 120 accept: xls,doc,rar,zip 121 122 , 123 messages: /自定义验证消息 124 username: 125 required: 用户名是必需的！, 126 minlength: $.format(用户名至少要0个字符！), 127 remote: $.format(0已经被占用) 128 , 129 firstpwd: 130 required: 密码是必需的！, 131 rangelength: $.format(密码要在0-1个字符之间！) 132 , 133 secondpwd: 134 required: 密码验证是必需的！, 135 equalTo: 密码验证需要与密码一致 136 , 137 sex: 138 required: 性别是必需的 139 , 140 age: 141 required: 年龄是必需的, 142 range: 年龄必须介于0-1之间 143 , 144 email: 145 required: 邮箱是必需的！, 146 email: 请输入正确的邮箱地址（例如 ） 147 , 148 purl: 149 required: 个人主页是必需的, 150 url: 请输入正确的url格式,如 151 , 152 afile: 153 required: 附件是必需的！, 154 accept: 只接收xls,doc,rar,zip文件 155 156 , 157 errorPlacement: function(error, element) /验证消息放置的地方 158 error.appendTo( element.parent(td).next(td) ); 159 , 160 highlight: function(element, errorClass) /针对验证的表单设置高亮 161 $(element).addClass(errorClass); 162 , 163 success: function(label) 164 label.addClass(valid).text(Ok!) 165 166 167 /*, 168 errorContainer: #error_con, /验证消息集中放置的容器 169 errorLabelContainer: #error_con ul, /存放消息无序列表的容器 170 wrapper: li, /将验证消息用无序列表包围 171 validClass: valid, /通过验证的样式类 172 errorElement: em, /验证标签的名称，默认为：label 173 success: valid /验证通过的样式类 174 */ 175 ); 176 $(button).click(function() 177 validator.resetForm(); 178 ); 179 /alert($(#password).rules()required); 180 /validator.showErrors(username: 用户名是必需的); 181 /*$(button).click(function () 182 var str = Hello 0, this is 1; 183 alert( + str + ); 184 str = $.validator.format(str, koala,oo); 185 alert( + str + ); 186 );*/ 187 188 ); $(function() var validator = $(#myform).validate( debug: true, /调试模式取消submit的默认提交功能 errorClass: haha,/默认为错误的样式类为：error focusInvalid: false, onkeyup: false, submitHandler: function(form) /表单提交句柄,为一回调函数，带一个参数：form alert(提交表单); /form.submit(); 提交表单 , rules: /定义验证规则,其中属性名为表单的name属性 username: required: true, minlength: 2, remote: uservalid.jsp /传说当中的ajax验证 , firstpwd: required: true, /minlength: 6 rangelength: 6,8 , secondpwd: required: true, equalTo: #password , sex: required: true , age: required: true, range: 0,120 , email: required: true, email: true , purl: required: true, url: true , afile: required: true, accept: xls,doc,rar,zip , messages: /自定义验证消息 username: required: 用户名是必需的！, minlength: $.format(用户名至少要0个字符！), remote: $.format(0已经被占用) , firstpwd: required: 密码是必需的！, rangelength: $.format(密码要在0-1个字符之间！) , secondpwd: required: 密码验证是必需的！, equalTo: 密码验证需要与密码一致 , sex: required: 性别是必需的 , age: required: 年龄是必需的, range: 年龄必须介于0-1之间 , email: required: 邮箱是必需的！, email: 请输入正确的邮箱地址（例如 ） , purl: required: 个人主页是必需的, url: 请输入正确的url格式,如 , afile: required: 附件是必需的！, accept: 只接收xls,doc,rar,zip文件 , errorPlacement: function(error, element) /验证消息放置的地方 error.appendTo( element.parent(td).next(td) ); , highlight: function(element, errorClass) /针对验证的表单设置高亮 $(element).addClass(errorClass); , success: function(label) label.addClass(valid).text(Ok!) /*, errorContainer: #error_con, /验证消息集中放置的容器 errorLabelContainer: #error_con ul, /存放消息无序列表的容器 wrapper: li, /将验证消息用无序列表包围 validClass: valid, /通过验证的样式类 errorElement: em, /验证标签的名称，默认为：label success: valid /验证通过的样式类 */ ); $(button).click(function() validator.