编程 Javascript

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>

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 研究心得取得属性的值

Nov 30 Javascript

JavaScript判断窗口是否最小化的代码(跨浏览器)

Aug 01 Javascript

javascript数组去掉重复

May 12 Javascript

javascript判断iphone/android手机横竖屏模式的函数

Dec 20 Javascript

如何使用jQuery来处理图片坏链具体实现步骤

May 02 Javascript

详解JavaScript正则表达式之RegExp对象

Dec 13 Javascript

关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库

Nov 30 Javascript

JS数组搜索之折半搜索实现方法分析

Mar 27 Javascript

详解Angular.js数据绑定时自动转义html标签及内容

Mar 30 Javascript

详解在vue-cli中使用路由

Sep 25 Javascript

vue加载完成后的回调函数方法

Sep 07 Javascript

微信小程序封装分享与分销功能过程解析

Aug 13 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