jquery validate 插件：，2简单示例
最简单的例子，比如我们有一个表单：
<form action="" method="get" ,
email:{
required:true,
email:true
}
}
});
});
这样以来，也能达到相同的效果。
那么，接下的问题，就是显示的错误提示是默认的。我们需要使用自定义的提示：
$(document).ready(function(){
$("#frm").validate({
rules:{
username:"required",
email:{
required:true,
email:true
}
},
messages:{
username:"请输入您的用户名",
email:{
required:"请输入您的电子邮件地址",
email:"清输入一个格式正确的电子邮件地址"
}
}
});
});
如果，我们希望将错误信息装入input后面的em标签中呢？我们只需要在validate的options参数中加入errorPlacement项：
$(document).ready(function(){
$("#frm").validate({
rules:{
username:"required",
email:{
required:true,
email:true
}
},
messages:{
username:function(){},
email:{
required:"请输入您的电子邮件地址",
email:"清输入一个格式正确的电子邮件地址"
}
},
errorPlacement:function(error, element){
error.appendTo(element.next("em"));
}
});
});
现在，我们给username加上一个最短和最长的限制：
$(document).ready(function(){
$("#frm").validate({
rules:{
username:{
required:true,
minlength:3,
maxlength:15
},
email:{
required:true,
email:true
}
},
messages:{
username:{
required:"请输入您的用户名",
minlength:jQuery.format("用户名不能少于 {0} 个字符"),
maxlength:jQuery.format("用户名长度不能超过 {0} 个字符")
},
email:{
required:"请输入您的电子邮件地址",
email:"清输入一个格式正确的电子邮件地址"
}
},
errorPlacement:function(error, element){
error.appendTo(element.next("em"));
}
});
});
另外还有一种简单的验证方式
1.除引用jquery.js、jquery.validate.js外，再添加引用jquery.metadata.js
<script language="javascript" type="text/javascript" src="js/jquery.metadata.js"></script>
2.在控件上通过class{}添加验证规则
<input type="text" name="username" class="{required:true,messages:{required:'请输入用户名'}}" />
<input type="text" name="email" class="{required:true,email:true,messages:{required:'请输入电子邮件',email:'电子邮件格式有误!'}}" />
3.同样在document的read事件中，加入如下方法：
<script>
$(document).ready(function(){
$("#frm").validate();
}
</script>
- 上一篇 »JQuery表单验证插件
- 下一篇 »jquery插件-validate