<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > |
<html xmlns= "http://www.w3.org/1999/xhtml" > |
<head> |
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> |
<title></title> |
<script src= "../../scripts/jquery-1.3.1.js" type= "text/javascript" > |
</script> |
<script src= "lib/jquery.validate.js" type= "text/javascript" > |
</script> |
<style type= "text/css" > |
/*<![CDATA[*/ |
* { 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; } |
em.error { |
background:url( "images/unchecked.gif" ) no-repeat 0px 0px; |
padding-left: 16px; |
} |
em.success { |
background:url( "images/checked.gif" ) no-repeat 0px 0px; |
padding-left: 16px; |
} |
/*]]>*/ |
</style> |
<script type= "text/javascript" > |
//<![CDATA[ |
$(document).ready( function (){ |
//自定义一个验证方法 |
$.validator.addMethod( |
"formula" , //验证方法名称 |
function (value, element, param) { //验证规则 |
return value == eval(param); |
}, |
'请正确输入数学公式计算后的结果' //验证提示信息 |
); |
$( "#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指向上面那个错误提示信息标签em |
label.text( " " ) //清空错误提示消息 |
.addClass( "success" ); //加上自定义的success类 |
} |
}); |
}); |
//]]> |
</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> <input id= "curl" name= "url" size= "25" value= "" /></p> |
<p><label for = "ccomment" >你的评论</label> <em>*</em> |
<textarea id= "ccomment" name= "comment" cols= "22" > |
</textarea></p> |
<p><label for = "cvalcode" >验证码</label> <input id= "cvalcode" name= "valcode" size= "25" value= "" />=7+9</p> |
<p><input class= "submit" type= "submit" value= "提交" /></p> |
</fieldset> |
</form> |
</body> |
</html> |