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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
一个简单的js鼠标划过切换效果
Jun 30 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 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
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
javascript中this关键字详解
2016/12/12 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
node后端服务保活的实现
2019/11/10 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
Python translator使用实例
2008/09/06 Python
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
Django中对数据查询结果进行排序的方法
2015/07/17 Python
python3音乐播放器简单实现代码
2020/04/20 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
pandas中的series数据类型详解
2019/07/06 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
求职自荐信格式
2013/12/04 职场文书
安全教育实施方案
2014/03/02 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2015年科协工作总结
2015/05/19 职场文书
护理心得体会范文
2016/01/22 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
Python实现双向链表
2022/05/25 Python