jquery结合CSS使用validate实现漂亮的验证


Posted in Javascript onJanuary 29, 2015

自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢

<!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><TITLE>鼠标悬停 - ?果·志 - goldapple's blog</TITLE> 
<META http-equiv=Content-Type content="text/html; charset=utf-8"> 
<STYLE type=text/css> 
BODY { 
  FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif 
} 
 { 
  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px 
} 
A { 
  DISPLAY: block; WIDTH: 164px; COLOR: #000000; HEIGHT: 36px; TEXT-DECORATION: none 
} 
UL { 
  MARGIN: 200px auto; WIDTH: 632px; LIST-STYLE-TYPE: none 
} 
LI { 
   FLOAT: left; MARGIN: 0px 20px; WIDTH: 164px; LINE-HEIGHT: 39px; POSITION: relative; HEIGHT: 36px; TEXT-ALIGN: center 
} 
LABEL { 
  DISPLAY: none; BACKGROUND: url(images/hover.gif) no-repeat 0px 0px; LEFT: -16px; WIDTH: 200px; LINE-HEIGHT: 68px; POSITION: absolute; TOP: -100px; HEIGHT: 76px 
} 
input.error{ 
border: 2px dashed red; 
} 
</STYLE> 
<SCRIPT src="images/jquery.min.js" type=text/javascript></SCRIPT> 
<SCRIPT src="jquery.validate.js" type=text/javascript></SCRIPT> 
<SCRIPT type=text/javascript> 
$(function(){ 
 $('#a input').hover(function(){ 
  $(this).parent().find('label').animate({opacity:"show",left:"-85px"},500);//.show(); 
  },function(){ 
  $(this).parent().find('label').animate({opacity:"hide",left:"-105px"},500);//.hide(); 
  });  
  $("#signupForm").validate({ 
    rules: { 
        password: { 
        required: true, 
        minlength: 5 
        }, 
        name:{ 
         required:true 
        } 
 }, 
    messages: { 
      password: { 
      required: "请输入密码", 
      minlength: jQuery.format("密码不能小于{0}个字符") 
      }, 
      name:{ 
       required:"测试" 
      } 
 },success:function(){ 
  $("label.error").remove(); 
 } 
  }); 
}) 
</SCRIPT> 
<META content="MSHTML 6.00.2900.5803" name=GENERATOR></HEAD> 
<BODY> 
<form id="signupForm"> 
<div id="a"> 
<UL> 
 <LI><div><input type="text" name="password"></div> </LI> 
 <LI><input type="text" name="name"> </LI> 
</UL> 
</div> 
</form> 
</BODY></HTML>

是不是非常漂亮呢,下伙伴们也可以按照自己的要求美化美化,希望小伙伴们能够喜欢。

Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
iview实现图片上传功能
Jun 29 Javascript
Echarts.js无法引入问题解决方案
Oct 30 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 #Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 #Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 #Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 #Javascript
javascript面向对象程序设计(一)
Jan 29 #Javascript
jquery调取json数据实现省市级联的方法
Jan 29 #Javascript
JavaScript中实现单体模式分享
Jan 29 #Javascript
You might like
php echo 输出字符串函数详解
2010/05/13 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
js读取配置文件自写
2014/02/11 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
详解Django中的权限和组以及消息
2015/07/23 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
超市周年庆活动方案
2014/08/16 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
Python基础之进程详解
2021/05/21 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js