欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-10-11 08:23:58
自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢

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

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
<html xmlns="https://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"> 
<p id="a"> 
<ul> 
 <li><p><input type="text" name="password"></p> </li> 
 <li><input type="text" name="name"> </li> 
</ul> 
</p> 
</form> 
</body></html>

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

上一篇： 提升百倍效率 Oracle数据库性能优化

下一篇： 应对大数据 DDN推出新型混合式存储阵列

推荐阅读