浏览 5049 次
|
锁定老帖子 主题：省时省力的jquery验证框架
精华帖 (0) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (5)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-07-18
最后修改：2011-07-18
前段的表单验证，重复性高，虽然网上一大堆js代码，每当邮件，电话号码什么的验证，直接copy，但是有了这个框架真实美包包。
jquery validate 验证框架，本来想详细写写用法，发现坛子里paskaa几年前写过，不知道为何帖子沉了。 详细使用： http://www.iteye.com/topic/276661 http://www.iteye.com/topic/280295 官方文档参考：http://docs.jquery.com/Plugins/Validation 官方那个，我感觉这个文档写的不是很详细，读了几遍还是发现有些没讲清楚 既然有了前面的东东，我发帖的主要是为了分享好东东，并且写写我们项目里demo 面对如下一个表单验证： 
如果需要自己写js，那么真实悲剧啊，写的一个叫累，写了这么多后，发现居然没有处理获取焦点后，提示消失，下面是不使用框架的代码
$(document).ready(function() {
$("#errorAuthor").hide();
$("#errorContent").hide();
$("#errorverifyCode").hide();
$("#errorverifyCodeError").hide();
$("#verifyImage").click(function(){
$(this).attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());
});
$("#cmmAuthor").click(function() {
$("#errorAuthor").hide();
});
$("#cmmContent").click(function() {
$("#errorContent").hide();
});
$("#verifyCode").click(function() {
$("#errorverifyCode").hide();
$("#errorverifyCodeError").hide();
$.get("../productComment/prd_comt_verifyCode.action", function(data){
if(data=="error"){
$("#errorverifyCodeError").show();
return ;
}
});
});
});
function changeVerifyCode() {
$("#verifyImage").attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());
}
function submitForm() {
var author=$("#cmmAuthor").attr("value");
var content=$("#cmmContent").attr("value");
var verifyCode=$("#verifyCode").attr("value");
var value=$("#verifyCode").attr("value");
if(author==""){
$("#errorAuthor").show();
return ;
}
if(content==""){
$("#errorContent").show();
return ;
}
if(verifyCode==""){
$("#errorverifyCode").show();
return ;
}
$("form:first").submit();
}
使用框架： 只需要做出如下更改，先引入lib，然后直接写就可以了，注意加载顺序 引用 <script src="${application.WebResourceUrl }/scripts/global/lib/jquery/core/jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script> <script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/jquery.validate.min.js" type="text/javascript" language="javascript"></script> <script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/jquery.validate.messages_cn.js" type="text/javascript" language="javascript"></script> <script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/additional-methods.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" >
$(document).ready(function() {
$("#verifyImage").click(function(){
$(this).attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());
});
$("#productComment").validate({
rules: {
cmmAuthor: {
required: true
},
cmmContent: {
required: true
},
verifyCode:{
required: true,
remote: "../productComment/prd_comt_verifyCode.action"
}
},
messages: {
cmmAuthor:{
required: "请输入您的姓名或昵称"
},
cmmContent:{
required: "请输入您的评论"
},
verifyCode:{
required: "请输入验证码",
remote: "验证码不正确"
}
},
errorPlacement: function(error,element){
$("#errorMessage").append(error);
$("#errorMessage").append($("<br/>"));
},
success: function(label) {
}
});
});
remote为ajax验证，如果返回值是true，那么无提示，不返回就提示错误信息，这个比jqury写ajax还方便。 测试： 什么都不输入，提交 
输入错误验证码，提交 
以上demo只是基本的使用，你还可以复杂的控制，比如在里面控制错误显示，demo里面的错误显示是自己在html里面控制的<span id="errorMessage" style="color: red;">，必须放到form表单内，否则错误提示在你时间触发时候不会消失，只会又生成一个提示，非常bug。 用框架控制，就紧跟message方法后面
// 定义错误信息提示的位置和样式
errorElement: "em", // 定义错误标记标签，<em>error</em>
errorPlacement: function(error,element){
element.nextAll("i").addClass("error");
element.nextAll("i").append(error);
},
// 定义验证成功相关样式和事件
success: function(label) {
}
});
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-07-19
n=Math.random();
这个可以写成time=new Date().getTime(); |
| 返回顶楼 | |
|
发表时间：2011-07-19
1, 看起来不省时省力啊．．
2, 2楼这样做和random相比有什么好处？ |
| 返回顶楼 | |
|
发表时间：2011-07-20
学习过程很费力。提示地方能改改不，改成tip形式的。
|
| 返回顶楼 | |
|
发表时间：2011-07-20
最后修改：2011-07-20
这里有个不错的验证框架，口碑还不错：http://tywo45.iteye.com/blog/253317
|
| 返回顶楼 | |
|
发表时间：2011-07-20
楼主辛苦，不过一般公司对这个直接考过来就用了，也不管放不方便，毕竟就这么点东西，但应该有个小框架 呵呵
|
| 返回顶楼 | |
|
发表时间：2011-07-21
mib168 写道 楼主辛苦，不过一般公司对这个直接考过来就用了，也不管放不方便，毕竟就这么点东西，但应该有个小框架 呵呵
这个相当于现成规则总结的东西，基本只需要两个小时就能熟练使用 |
| 返回顶楼 | |
|
发表时间：2011-07-21
hastune 写道 n=Math.random();
这个可以写成time=new Date().getTime(); 恩 |
| 返回顶楼 | |
|
发表时间：2011-07-21
nakupanda 写道 1, 看起来不省时省力啊．．
2, 2楼这样做和random相比有什么好处？ 第一种方法, 有出现重复的值的隐患, 导致使用缓存内容 第二种方法, 则不会, 因为你不可能在1ms内进行两次操作 |
| 返回顶楼 | |
