详解jQuery的表单验证插件(2)

$('#commentForm').validate({ rules: { firstname: { required: true, minlength: 5 }, lastname: "required", username: { required: true, rangelength: [4,6] }, password: { required: true, minlength: 4, number: true }, confirm_password: { required: true, minlength: 3, equalTo: '#password' }, email: { required: true, email: true } }, messages: { firstname: "请输入您的名字", lastname: "请输入您的姓氏", username: { required: "请输入用户名", minlength: "用户名必需由两个字母组成" }, password: { required: "请输入密码", minlength: "密码长度不能小于 5 个字母" }, confirm_password: { required: "请输入密码", minlength: "密码长度不能小于 5 个字母", equalTo: "两次密码输入不一致" }, email: "请输入一个正确的邮箱", } });

效果:

详解jQuery的表单验证插件

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

<input type="text">

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

表单提交问题

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

$('#commentForm').validate({ submitHandler: function(){ alert("提交事件成功"); from.submit(); } });

可以设置validate的默认值

$.validate.setDefaults({ submitHandler: function(){ alert("提交成功!"); form.submit(); } });

只验证不提交表单

$(function(){ $("#commentForm").validate({ debug:true; }); });

错误提示信息设置

1、错误信息位置设置

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

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

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

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

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

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

例如:

errorPlacement: function(error,element){ $(element).closest('form').find('label[for="'+ element.attr("id") +'"]').append(error); },

是将错误提示信息显示在验证的信息前面

效果:

详解jQuery的表单验证插件

例如:

errorElement: 'span', errorClass: 'commentError', errorLabelContainer: $('form div.error'), wrapper: 'li',

是将每个提示信息用<span>标签包起来,给他们添加css名为 .commentError 的样式, 并把他们都包再一个class为 error 的div里,在用<li>把每个提示信息包起来  

效果:

详解jQuery的表单验证插件

2、错误信息样式设置

有两种方式可以修改提示信息的样式

第一种就是采用下载Validation时自带的样式文件

<link href="https://www.jb51.net/demo/css/screen.css" type="text/css" />

第二种方式就是自己定义样式(当然也可以修改自带的css文件)

例如添加这样的样式:

input.error { border: 1px solid red; } label.error { background:url("demo/images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200; } label.checked { background:url("demo/images/checked.gif") no-repeat 0px 0px; }

效果:

详解jQuery的表单验证插件

验证时的问题

1、验证的元素通过

验证的元素通过验证时如果要进行操作,可以使用 success ,他可以接受字符串或者是函数,当接受的是字符串的时候是添加样式

例如:

success: function(){ alert(1); },

是在要验证的元素通过验证时,弹出1

例如:

success: "valid"   

是将css样式名为 .valid 添加到元素上

2、验证方式

详解jQuery的表单验证插件

自定义校验

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwfywz.html