validate如何使用?
时间:2010-02-28
来源:互联网
<!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>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.validate.messages_cn.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
nihao.error {
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
nihao.success {
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
</style>
<script>
$(function()
{
//自定义一个验证方法
$.validator.addMethod
(
"formula", //验证方法名称
function(value, element, param)
{//验证规则
return value == eval(param);
}
//请正确输入数学公式计算后的结果'//验证提示信息
)
})
$(
function()
{
$("#commentForm").validate
(
{
rules:
{
username:{required:true,minlength:6},
email:{required:true,email:true},
url:"url",
comment: "required",
valcode: {
formula: "7+9"
}
},
messages:
{
username:{required:'请输入姓名',minlength:'至少输入6个字符'},
email:{required:'请输入电子邮箱',email:'请检查电子邮箱的格式'},
url:'请检查网址的格式',
comment: "请输入您的评论",
valcode:{required:'请输入验证码'}
},
errorElement: "nihao", //可以用其他标签,记住把样式也对应修改
success: function(lable) {
lable.text("成功") //清空错误提示消息
/addClass("success"); //加上自定义的success类
//}
}
)
}
)
</script>
<title>无标题文档</title>
</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" class="required" minlength="2" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
验证码<input id="cvalcode" name="valcode" size="25" value="" />=7+9
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>
以上代码中的开头的自定义的验证方法看不明白,还有最后的一段代码:
success: function(lable) {
lable.text("成功") //清空错误提示消息
/addClass("success"); //加上自定义的success类
这三句代码是什么意思呢,好像是可有可无的,存不存在都一样啊
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.validate.messages_cn.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
nihao.error {
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
nihao.success {
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
</style>
<script>
$(function()
{
//自定义一个验证方法
$.validator.addMethod
(
"formula", //验证方法名称
function(value, element, param)
{//验证规则
return value == eval(param);
}
//请正确输入数学公式计算后的结果'//验证提示信息
)
})
$(
function()
{
$("#commentForm").validate
(
{
rules:
{
username:{required:true,minlength:6},
email:{required:true,email:true},
url:"url",
comment: "required",
valcode: {
formula: "7+9"
}
},
messages:
{
username:{required:'请输入姓名',minlength:'至少输入6个字符'},
email:{required:'请输入电子邮箱',email:'请检查电子邮箱的格式'},
url:'请检查网址的格式',
comment: "请输入您的评论",
valcode:{required:'请输入验证码'}
},
errorElement: "nihao", //可以用其他标签,记住把样式也对应修改
success: function(lable) {
lable.text("成功") //清空错误提示消息
/addClass("success"); //加上自定义的success类
//}
}
)
}
)
</script>
<title>无标题文档</title>
</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" class="required" minlength="2" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
验证码<input id="cvalcode" name="valcode" size="25" value="" />=7+9
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>
以上代码中的开头的自定义的验证方法看不明白,还有最后的一段代码:
success: function(lable) {
lable.text("成功") //清空错误提示消息
/addClass("success"); //加上自定义的success类
这三句代码是什么意思呢,好像是可有可无的,存不存在都一样啊
作者: ddjiang1115 发布时间: 2010-02-28
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28