11月
12
jQuery form validation plugins
文章分类：jQuery 查看次数：865 + 157
表单验证一直是一个大问题，但是有了jquery，有了form validation plugins，一切就变得简单了。
点此查看官方说明文档
来看个简单的例子：http://www.live-my-life-with-yuyi.com/lab/jquery/validation/
实现代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test for jQuery validate() plugin</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/cmxforms.js" type="text/javascript"></script>
<script src="js/jquery.metadata.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.meta.setType("attr", "validate");
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate({
messages:{
cname:"请输入用户名",
cemail:{
required:"电子邮件不能为空",
email:"电子邮件格式不正确"
},
curl:"URL格式不对",
ccomment:"留言不能为空"
}
});
});
</script>
先载入4个js文件，放心这四个文件都很小
这句话的意思是设置一个标签，然后在这个标签里，定义相关的属性，比如required,minLength等等
submitHandler: function() { alert("submitted!"); }
});
这个函数会在所有验证都通过时触发，提交表单。
messages:{
cname:"请输入用户名",
cemail:{
required:"电子邮件不能为空",
email:"电子邮件格式不正确"
},
curl:"URL格式不对",
ccomment:"留言不能为空"
}
});
这个是自定义错误信息，属性对应的是表单项的name，值对应的是当验证不通过时的错误信息。就这么简单，验证部分就做完了。
再来看看表单部分
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="cname" class="some other styles " validate = "required:true,minLength:2" />
<div> </p><p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" name="cemail" validate = "required:true,email:true" />
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" name="curl" validate = "url:true" value="" />
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="ccomment" validate = "required:true"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
<label for="spam_email">
<input type="checkbox" id="spam_email" value="email" name="spam" validate="required:true, minLength:2" />
Spam via E-Mail
</label>
<label for="spam_phone">
<input type="checkbox" id="spam_phone" value="phone" name="spam" />
Spam via Phone
</label>
<label for="spam_mail">
<input type="checkbox" id="spam_mail" value="mail" name="spam" />
Spam via Mail
</label>
<label for="spam" class="error">请至少选择两个选项</label>
</p>
</fieldset>
</form>
比正常的表单多出来的一项就是validate，这个在之前的js里已经设置过了，这里面就定义了该表单项的验证信息，如是否是必填，最短长度，是否为email等等。
这句话看起来比较有意思
当class的值为error时，默认是被隐藏的，只有当提交表单进行验证并出错时才会显示，同时这个for也是必不可少的，for的内容对应的是要监视的表单项。
其实最终促成我写这篇文章的原因是，从官方下载的插件在ie6下无效，经过近3个小时的追查，终于发现在jquery.validate.js里，url验证那块有乱码，结果直接导致ie6不能运行（在FF和IE7下正常）。于是我修改了一下，终于可以通过IE6了。
相关文章
评论
共8 条评论 to “jQuery form validation plugins”
发表评论
-
-
订阅我的博客
呵呵，我原来就想用这个使用到我的blog上，但是发觉冲突了，改成无冲突模式发觉得修改好多地方，最终放弃，现在想自己写一个，努力中…………
“先载入4个js文件，放心这四个文件都很小”
4个文件就已经是四个链接请求，这点应用到项目还是得注意点，特别是流量大的网站，少个链接请求说不定能为你省多台服务器
[回复此评论]
“4个文件就已经是四个链接请求，这点应用到项目还是得注意点，特别是流量大的网站，少个链接请求说不定能为你省多台服务器”
同意这句话，YSLOW也提到过这点，这个就等到大项目的时候再说吧，而且适当地运用客户端缓存也是个不错的办法。
你的页面上我看只有coolcode可能和jquery冲突，不行就把她换了吧:)
[回复此评论]
[...] 这个我在之前的一篇文章已经推荐过了，非常强大方便的表单验证工具。 [...]
在 IE6 上出问题的原因，有可能是因为编码不对。 Jörn 的回答是加上 charset：
[回复此评论]
恩，应该就是编码的问题
[回复此评论]
[...] jQuery form validation plugins （转） 字体 - 大 中 小标签: Javascript Jquery http://www.live-my-life-with-yuyi.com/blog/archives/185 [...]
国产的jQuery formValidator，功能比老外的强大的多，大家可以去官网看一下。
jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例。jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面的分离。对一个表单对象，你只需要写一行代码就可以轻松实现20多种脚本控制
http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.html
[回复此评论]
lzyy 发表于 03月 23, 2008:
恩，不错，很强大
[回复此评论]