一个简单的验证带验证提示例子
2010-11-05 23:47
375 查看
该例子的源码来源于《锋利的JQuery》这本书。Jquery,怎么说呢?不说别的,开发基于js脚本的web页面的人,真的很值得看看。它对js原生代码的封装的很好,有点面向接口编程的思想,不用知道具体的实现,对于很多方法直接拿来用就OK了。而且还有行为和表现的分离这层思想。。。感觉学了点皮毛,又感觉收获很多。
还有很多的plugins可供学习。。。下面是Validate插件的简单使用代码:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<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="../../scripts/jquery.validate.js" type="text/javascript"></script>
<script src="../../scripts/jquery.metadata.js" type="text/javascript"></script>
<style type="text/css">
* { 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; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#commentForm").validate({meta: "validate"});
});
</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" class="{validate:{required:true, minlength:2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" class="{validate:{required:true, email:true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" value="" class="{validate:{url:true, messages:{url:'请检查网址的格式'}}}" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true, messages:{required:'请输入您的评论'}}}" ></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>
需要引入的包,自行下载。
还有很多的plugins可供学习。。。下面是Validate插件的简单使用代码:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<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="../../scripts/jquery.validate.js" type="text/javascript"></script>
<script src="../../scripts/jquery.metadata.js" type="text/javascript"></script>
<style type="text/css">
* { 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; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#commentForm").validate({meta: "validate"});
});
</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" class="{validate:{required:true, minlength:2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" class="{validate:{required:true, email:true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" value="" class="{validate:{url:true, messages:{url:'请检查网址的格式'}}}" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true, messages:{required:'请输入您的评论'}}}" ></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>
需要引入的包,自行下载。
相关文章推荐
- 一个简单的WebService实现例子,SOAP安全验证
- 一个简单的异步验证用户名的例子
- extJs+json实现的一个登陆验证的简单例子
- Shiro中最简单的一个身份验证例子
- 利用ajax技术验证数据是否存在的一个简单例子
- JQuery在一个简单的表单验证的例子
- 一个简单的例子展示makefile推导顺序(@echo输出字符串验证)
- 一个简单的用javascript验证表单的例子
- 一个Spring Boot, JWT,AugularJS接口安全验证的简单例子
- 一个简单的用ajax验证注册用户名是否存在的例子
- 一个LDAP验证的简单例子
- Hibernate Composite-element映射的一个简单例子
- MFC:一个最简单的例子
- 一个简单的排序例子理解闭包作为参数
- hibernate级联操 同时向2张表插入数据(一对多的关联,一个简单的例子说明)
- 一个颜色轮换的简单例子
- 一个基于MINA框架应用的最简单例子
- 一个综合泛型编程,文件读取和异常处理的简单例子
- android 一个简单的服务例子
- java设置文本框-按钮的一个简单例子(加法器)