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 相关文章推荐
情人节之礼 js项链效果
Feb 13 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 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 XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
微信支付开发维权通知实例
2016/07/12 PHP
laravel请求参数校验方法
2019/10/10 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
js 替换
2008/02/19 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
Python实现字典的遍历与排序功能示例
2017/12/23 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Python使用python-docx读写word文档
2019/08/26 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
外语系毕业生自荐信范文
2013/12/16 职场文书
项目建议书范文
2014/05/12 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL