jQuery学习之路（8）- 表单验证插件-Validation，jquery-validation(2)_H5之家

　　第二种方式：自己写提示信息

1 $('#commentForm').validate({ 2 rules: { 3 4 firstname: { 5 required: true, 6 minlength: 5 7 }, 8 9 lastname: "required", 10 11 username: { 12 required: true, 13 rangelength: [4,6] 14 }, 15 16 password: { 17 required: true, 18 minlength: 4, 19 number: true 20 }, 21 22 confirm_password: { 23 required: true, 24 minlength: 3, 25 equalTo: '#password' 26 }, 27 28 email: { 29 required: true, 30 email: true 31 } 32 }, 33 messages: { 34 35 firstname: "请输入您的名字", 36 lastname: "请输入您的姓氏", 37 username: { 38 required: "请输入用户名", 39 minlength: "用户名必需由两个字母组成" 40 }, 41 password: { 42 required: "请输入密码", 43 minlength: "密码长度不能小于 5 个字母" 44 }, 45 confirm_password: { 46 required: "请输入密码", 47 minlength: "密码长度不能小于 5 个字母", 48 equalTo: "两次密码输入不一致" 49 }, 50 email: "请输入一个正确的邮箱", 51 } 52 });

　　效果：

　　注意：还有一种写验证的方式是在 class 中写，例如

　　但是不推荐这种写法，因为不符合样式与结构分离的要求，并且还需要自己下载一个jquery.metadata.js文件才能够这样写

▓▓▓▓▓▓ 表单提交问题

　　可以在表单提交之前执行我们自定义的代码，当我们的自定义代码执行完毕后再提交表单

1 $('#commentForm').validate({ 2 3 submitHandler: function(){ 4 alert("提交事件成功"); 5 from.submit(); 6 } 7 });

　　可以设置validate的默认值

1 $.validate.setDefaults({ 2 submitHandler: function(){ 3 alert("提交成功！"); 4 form.submit(); 5 } 6 });

　　只验证不提交表单

1 $(function(){ 2 $("#commentForm").validate({ 3 debug:true; 4 }); 5 });

▓▓▓▓▓▓ 错误提示信息设置

　　1、错误信息位置设置

　　errorPlacement方法是设置错误信息显示在哪，默认值是在验证元素的后面

1 errorPlacement: function(error, element) { 2 error.appendTo(element.parent()); 3 }

　　errorClass 是设置错误信息的样式，后跟css类名

　　errorElement 是设置用什么标签包住错误信息，默认值是<label>

　　errorLabelContainer 是设置将所有的错误信息包在一个地方

　　wrapper 是设置用什么标签再把上边的 errorELement 包起来