网站地图
【www.gdgbn.com--jquery】
如需要修改这些提示信息，你可以在js代码中加入任何你想要输出显示的信息提示.
我们以最常用的注册表单验证来作为例子演示一下:
首先要有一个form表单,并定义form的id.
然后引入下面这四个js文件:
<script src="../js/jquery.js" type="text/网页特效"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>
<script src="./js/messages_cn.js" type="text/javascript"></script>然后自定义一个js文件,这个js文件的内容如下:
$("#login").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalto: "#password"
}
},
messages: {
username: {
required: " 请输入用户名",
minlength: jquery.format(" 用户名不正确，应该在2个汉字或四个字符以上")
},
email: {
required: "请输入email地址",
email: " 请输入正确的email地址"
},
password: {
required: " 请输入密码",
minlength: jquery.format(" 您输入的密码不正确，应该在6位或6位字符以上")
},
confirm_password: {
required: "请输入确认密码",
minlength: jquery.format(" 您输入的密码不正确，应该在6位或6位字符以上"),
equalto: "两次输入密码不一致"
}
}
});
这是从一个论坛找到的
最简单的例子，比如我们有一个表单：
这个表单中，有用户名和电子邮件两个字段。他们都为非空， 并且电子邮件需要是格式正确的地址。使用validation最简单的方式，是引入jquery和jquery validation的js文件。然后分别给两个input加入class:
和
然后，在document的read事件中，加入如下方法：
<script>
$(document).ready(function(){
$("#frm").validate();
}
</script>
这样， 当form被提交的时候，就会根据input指定的class来进行验证了。如果失败，form的提交就会被阻止。并且，将提示信息显示在input的后面。
不过，这样感觉不太爽，因为验证规则侵入了我们的html代码。还有一个方式，便是使用“rules”。我们将input的那些验证用class删除掉。然后修改document的ready事件响应代码：
$(document).ready(function(){
$("#frm").validate({
rules:{
username:"required",
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"));
}
});
});