<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- charset-->
<script src="../../dreamweaver/jquery.min.js"></script>
<script src="jquery.validate.js"></script>
<script src="jquery.metadata.js"></script>
<script src="jquery.validate.messages_cn.js"></script> <!-- 验证信息的中文信息库-->
<title>Validation插件</title>
<script>
$(document).ready(function(){
$.validator.addMethod(
"formula", //验证方法名称
function(value, element, param) {//验证规则
return value==eval(param);
},
'请正确输入数学公式计算后的结果'//验证提示信息
);
// $("#myform").validate({meta:"validate"}); //不同的调用方式
$("#myform").validate({
rules:{
id:{
required:true,
minlength:6
},
mima:{
required:true,
minlength:7
},
youxiang:"email",
wangzhi:"url",
yanzhengma:{formula:"7+3"}
},
errorElement: "em",
success: function(label) {
label.text(" ")
.addClass("success");},
messages:{
id:"自定义,长度必须大于6",
mima:"自定义:长度必须大于7",
yanzhengma:"自定义:请输入正确验证码"
}
});
});
</script>
<style>
em.error{
background-image: url(../源码/锋利的jquery源码/《锋利的jQuery》实例源码/实例下载/07第七章/第七章例子/7-1-Validation/images/unchecked.gif);
background-repeat:no-repeat;
padding-left:20px;
color:red;
}
em.success{
background-image:url(../源码/锋利的jquery源码/《锋利的jQuery》实例源码/实例下载/07第七章/第七章例子/7-1-Validation/images/checked.gif);
background-repeat:no-repeat;
padding-left:20px;
}
</style>
</head>
<body>
<form action="#" method="get" id="myform"><fieldset>
<legend>Validation插件</legend>
<!--<p>
<label>用户名:</label>
<input name="id" class="{validate:{required:true,minlength:5}}" type="text" size="100" />
</p>
<p>
<label>密码: </label>
<input name="mima" class="{validate:{required:true,minlength:6}}" type="password" size="100" />
</p>
<p>
<label>邮箱: </label>
<input name="youxiang" class="{validate:{required:true,email:true}}"type="text" size="100" />
</p>
<label>网址: </label>
<input name="wangzhi" class="{validate:{required:true,url:true}}" type="text" size="100" />
<p>
<input name="mysubmit" type="submit" />
</p>-->
<p>
<label>用户名:</label>
<input name="id" type="text" size="100" />
</p>
<p>
<label>密码: </label>
<input name="mima" type="password" size="100" />
</p>
<p>
<label>邮箱: </label>
<input name="youxiang" type="text" size="100" />
</p>
<label>网址: </label>
<input name="wangzhi" type="text" size="100" />
<p>
<label>验证码: </label>
<input name="yanzhengma" type="text" size="100" value=""/>
<label> 7+3 </label>
</p>
<p>
<input name="mysubmit" type="submit" />
</p>
</fieldset>
</form>
</body>
</html>
jquery的Validation插件
最新推荐文章于 2023-07-25 20:44:49 发布