|
锁定老帖子 主题：jquery.validate.js简介
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-11-24
最后修改：2008-11-27
参看:http://docs.jquery.com/Plugins/Validation并整理
jquery.validate.js是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持
使用这个函数很简单，看以下的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">URL</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">Your comment</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
总结，我们只要在加入如下的JAVASCRIPT代码，就可以把指定的FORM加上验证 $(document).ready(function(){
$("#commentForm").validate();
});
不过我们还要在需要验证的INPUT里面class加入required说明是必填项，其他的就是验证相关数据比如email就是验证email的数据结构 以下列出validate自带的默认验证
required: "必选字段",
validate ()的可选项debug：进行调试模式$ (".selector").validate ({ debug: true }) 把调试设置为默认
$ .validator.setDefaults ({ debug: true })
submitHandler：用其他方式替代默认的SUBMIT,比如用AJAX的方式提交
$ (".selector").validate ({ submitHandler: function(form) { $ (form).ajaxSubmit(); } })
ignore：忽略某些元素不验证 $ ("#myform").validate ({ ignore: ".ignore" })
rules： 默认下根据form的classes, attributes, metadata判断，但也可以在validate函数里面声明 以下代码特别验证selector类中name='name'是必填项并且 email是既是必填又要符合email的格式
$ (".selector").validate ({ rules: { // simple rule, converted to {required:true} name: "required", // compound rule email: { required: true, email: true } } })
messages：更改默认的提示信息
$ (".selector").validate ({ rules: { name: "required", email: { required: true, email: true } }, messages: { name: "Please specify your name", email: { required: "We need your email address to contact you", email: "Your email address must be in the format of name@domain.com" } } }) groups：定义一个组，把几个地方的出错信息同意放在一个地方，用errorPlacement控制把出错信息放在哪里
$ ("#myform").validate ({ groups: { username: "fname lname" }, errorPlacement: function(error, element) { if (element.attr("name") == "fname" || element.attr("name") == "lname" ) error.insertAfter("#lastname"); else error.insertAfter(element); }, debug:true }) 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
浏览 24043 次
