<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
*{
font-family:Verdana;
font-size:96%;
}
label{
width:10em;
float:left;
}
label.error{
float:left;
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 src="jquery-1.11.1.min.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(document).ready(function(){
$('#commetForm').validate();
})
</script>
</head>
<body>
<form action="#" method='get' class="cmxform" id="commetForm">
<fieldset>
<legend>使用jquery插件validate制作的表单验证案例</legend>
<p>
<label for="cusername">姓名</label><em>*</em>
<input id="cusername" name="username" size="25" class="required" minlength="2" >
</p>
<p>
<label for="cemil">电子邮件</label><em>*</em>
<input id="cemil" name="emil" size="25" class="required email" >
</p>
<p>
<label for="curl">网址</label><em>*</em>
<input id="curl" class="url" size="25">
<p>
<label for="ccomment">你的评论</label><em>*</em>
<textarea name="" id="ccomment" cols="22" rows="10" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form> </body>
</html>
效果图如下：