使用jquery插件validate制作的表单验证案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
*{
font-family:Verdana;
font-size:96%;
}
label{
width:10em;
float:left;
}
label.error{
float:left;
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 src="jquery-1.11.1.min.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(document).ready(function(){
$('#commetForm').validate();
})
</script>
</head>
<body>
<form action="#" method='get' class="cmxform" id="commetForm">
<fieldset>
<legend>使用jquery插件validate制作的表单验证案例</legend>
<p>
<label for="cusername">姓名</label><em>*</em>
<input id="cusername" name="username" size="25" class="required" minlength="2" >
</p>
<p>
<label for="cemil">电子邮件</label><em>*</em>
<input id="cemil" name="emil" size="25" class="required email" >
</p>
<p>
<label for="curl">网址</label><em>*</em>
<input id="curl" class="url" size="25">
<p>
<label for="ccomment">你的评论</label><em>*</em>
<textarea name="" id="ccomment" cols="22" rows="10" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form> </body>
</html>
效果图如下:
使用jquery插件validate制作的表单验证案例的更多相关文章
- JavaScript 表单验证 案例
JavaScript 表单验证 案例 版权声明:未经授权,严禁转载! 编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...
- jQuery学习之:Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- 表单提交学习笔记(二)—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- JQuery制作网页——表单验证
1. 表单验证:减轻服务器的压力.保证输入的数据符合要求: 2. 常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3. 表单验证的思路: 1. ...
- 【转】Validate + Boostrap tooltip 表单验证示例
一.工具准备: 1.boostrap: 下载地址 http://getbootstrap.com/ jquery: jQuery版本需大于或等于1.8.0 jquery.validate.min.j ...
- jQuery应用实例5:表单验证
1.validation插件的使用: 入门案例: <html> <head> <meta charset="UTF-8"> <title& ...
- 【表单验证】基于jQuery的高度灵活的表单验证(无UI)
表单验证是前端开发过程中常见的一个需求,产品需求.业务逻辑的不同,表单验证的方式方法也有所区别.而最重要的是我们要清楚,表单验证的核心原则是--错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体 ...
- 用jquery写自己的form表单验证
这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路: ...
- jQuery表单验证案例
目标:使用jQuery进行表单验证. 功能:1.必填选项后面添加了红色小星星: 2.选中开始输入时,输入文本框会改变当前背景色,增强用户体验: 3.输入的时候就开始验证,当输入格式正确就会提醒,就是当 ...
随机推荐
- uniq命令 (转)
uniq命令可以去除排序过的文件中的重复行,因此uniq经常和sort合用.也就是说,为了使uniq起作用,所有的重复行必须是相邻的. uniq语法 [root@www ~]# uniq [-icu] ...
- Windows下如何配置tomcat环境变量
Apache Tomcat 是一款 Java Servlet 和 JavaServer Pages 技术的开源软件实现,可以作为测试 Servlet 的独立服务器,而且可以集成到 Apache Web ...
- Oracle常见的异常处理
总结了在操作数据库的时候常常遇见的Oracle异常以及处理方法. 代码 提示 备注 一般处理方法 ORA-01861 文字与格式字符串不匹配- ORA-00904 invalid column nam ...
- MyEclipse上的第一个java web
简单解说怎样MyEclipse上开发一个web project 以及怎样部署的问题. 第一步: 创建一个web project File -> New -> Web Project 将出现 ...
- kubernetes中使用NFS创建pv_pvc
Persistent Volume(持久化卷)简称PV, 是一个K8S资源对象,我们可以单独创建一个PV, 它不和Pod直接发生关系, 而是通过 Persistent Volume Claim, 简称 ...
- k8s内核参数调优
cat /etc/sysctl.conf kernel.core_uses_pid=1 kernel.pid_max=4194303 kernel.ctrl-alt-del=1 # kernel.co ...
- 简单易懂的Ubuntu生存战略:开启无线网卡的wifi热点,ap模式
在ubuntu下如何把无线网卡设置成可供wifi设备上网的接入点 因为某些移动设备对wifi热点的要求有些苛刻,p2p模式的无线连接方式虽然易设置,但是实用性不高. 相对而言,创建一个虚拟无线路由器成 ...
- 用setitimer实现多个定时器
从这篇文章中可以看出,setitimer只能实现一个定时器,如果多次调用setitimer,旧值都会被覆盖掉. 如何用setitimer实现多个定时器呢?下面是我的一个实现,具体的方法是: 用链表从小 ...
- HDUOJ--8球胜负
8球胜负 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- JavaScript 设计模式之代理模式
一.代理模式概念解读 1.代理模式概念文字解读 代理,顾名思义就是帮助别人做事,GOF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问.代理模式使得代理对象 ...