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 相关文章推荐
解javascript 混淆加密收藏
Jan 16 Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
详解JS模块导入导出
Dec 20 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
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导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
vue中的数据绑定原理的实现
2018/07/02 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python标准库sched模块使用指南
2017/07/06 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
django框架中间件原理与用法详解
2019/12/10 Python
python中常用的数据结构介绍
2021/01/12 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
天游软件面试
2013/11/23 面试题
电大自我鉴定范文
2013/10/01 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
经典安踏广告词
2014/03/21 职场文书
公司保密承诺书
2014/03/27 职场文书
社会实践活动总结报告
2014/04/29 职场文书
土地租赁意向书
2014/07/30 职场文书
学习考察心得体会
2014/09/04 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
Java设计模式之代理模式
2022/04/22 Java/Android