应该是这样的界面的
但是运行出来是这样的
随便输入一个字符之后就直接刷新了，八嘎呀路
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style type="text/css">
*{
font-family: Verdana;
font-size: 96%;
}
.cmxform{width: 900px;}
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;
}
em.error{
background: url("img/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
em.success{
background: url("img/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
</style>
<script src="../jq/jquery-1.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../jq/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="../jq/jquery.metadata.js" type="text/javascript" charset="utf-8"></script>
<script src="../jq/jquery.validate.messages_cn.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#commentForm').validate({
rules:{
username:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
url:"url",
comment:"required",
valcode:{
formula:'7+9'
}
},
messages:{
username:{
required:'请输入姓名',
minlength:'请至少输入两个字符'
},
email:{
required:'请输入电子邮件',
email:'请检查电子邮件的格式'
},
url:'请检查网址的格式',
comment:'请输入您的评论'
},
errorElement:"em",
success:function(label){
label.text(" ").addClass('success');
}
});
$.validator.addMethod(
"formula",
function(value,element,param){
return value==eval(param);
},
'请正确输入数学公式计算后的结果'
);
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="#">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label><em>*</em>
<input id="cusername" name="username" size="25" />
</p>
<p>
<label for="cemail">电子邮件</label><em>*</em>
<input id="cemail" name="email" size="25" />
</p>
<p>
<label for="curl">网址</label><em> </em>
<input id="curl" name="url" size="25" value="" />
</p>
<p>
<label for="ccomment">你的评论</label><em>*</em>
<textarea name="comment" id="ccoment" cols="22"></textarea>
</p>
<p>
<label for="cvalcode">验证码</label>
<input name="valcode" id="cvalcode" size="25" value=""/>=7+9
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>
