<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<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>
</head>
<body>
<form method="get" action="#" id="commentForm" class="cmxForm">
<fieldset>
<legend>将所有的与验证相关的信息写到class属性中方便管理</legend>
<p>
<label for="cusername">姓名</label><em>*</em>
<input type="text" name="username" size="25" id="cusername" class="{validate:{required:true,minlength:2}}"/>
</p>
<p>
<label for="cemail">电子邮箱</label><em>*</em>
<input type="text" name="email" size="25" id="cemail" class="{validate:{required:true,email:true}}">
</p>
<p>
<label for="curl">网址</label><em>*</em>
<input type="text" name="url" size="25" id="curl" class="{validate:{url:true}}">
</p>
<p>
<label for="ccomment">评论</label><em>*</em>
<textarea name="comment" cols="22" id="ccomment" class="{validate:{required:true}}"></textarea>
</p>
<p><input type="submit" name="" value="提交" class="submit"></p>
</fieldset>
</form>
<script type="text/javascript" src="../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="../scripts/lib/jquery.validate.js"></script>
<script type="text/javascript" src="../scripts/lib/jquery.metadata.js"></script>//引进一个新的Jquery的插件——jquery.metadata.js，该插件是一个支持固定格式解析的jquery插件
<script type="text/javascript">
$(function(){
//调用验证方法
$("#commentForm").validate({meta:"validate"});
})
</script>
</body>
</html>
matadata插件参照网址http://plugins.jquery.com/project/metadata
扫一扫
8320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
