首页 > 语言 > JavaScript > 正文

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

2024-05-06 16:15:30
字体:
来源:转载
供稿:网友

这篇文章主要介绍了jquery结合CSS使用validate实现漂亮的验证,需要的朋友可以参考下

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

 

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <HTML xmlns="http://www.w3.org/1999/xhtml">  
  3. <HEAD><TITLE>鼠标悬停 - 蘋果·志 - goldapple's blog</TITLE>  
  4. <META http-equiv=Content-Type content="text/html; charset=utf-8">  
  5. <STYLE type=text/css>  
  6. BODY {  
  7. FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif  
  8. }  
  9. {  
  10. PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px  
  11. }  
  12. A {  
  13. DISPLAY: block; WIDTH: 164px; COLOR: #000000; HEIGHT: 36px; TEXT-DECORATION: none  
  14. }  
  15. UL {  
  16. MARGIN: 200px auto; WIDTH: 632px; LIST-STYLE-TYPE: none  
  17. }  
  18. LI {  
  19. FLOAT: left; MARGIN: 0px 20px; WIDTH: 164px; LINE-HEIGHT: 39px; POSITION: relative; HEIGHT: 36px; TEXT-ALIGN: center  
  20. }  
  21. LABEL {  
  22. DISPLAY: none; BACKGROUND: url(images/hover.gif) no-repeat 0px 0px; LEFT: -16px; WIDTH: 200px; LINE-HEIGHT: 68px; POSITION: absolute; TOP: -100px; HEIGHT: 76px  
  23. }  
  24. input.error{  
  25. border: 2px dashed red;  
  26. }  
  27. </STYLE>  
  28. <SCRIPT src="images/jquery.min.js" type=text/javascript></SCRIPT>  
  29. <SCRIPT src="jquery.validate.js" type=text/javascript></SCRIPT>  
  30. <SCRIPT type=text/javascript>  
  31. $(function(){  
  32. $('#a input').hover(function(){  
  33. $(this).parent().find('label').animate({opacity:"show",left:"-85px"},500);//.show();  
  34. },function(){  
  35. $(this).parent().find('label').animate({opacity:"hide",left:"-105px"},500);//.hide();  
  36. });  
  37. $("#signupForm").validate({  
  38. rules: {  
  39. password: {  
  40. required: true,  
  41. minlength: 5  
  42. },  
  43. name:{  
  44. required:true  
  45. }  
  46. },  
  47. messages: {  
  48. password: {  
  49. required: "请输入密码",  
  50. minlength: jQuery.format("密码不能小于{0}个字符")  
  51. },  
  52. name:{  
  53. required:"测试"  
  54. }  
  55. },success:function(){  
  56. $("label.error").remove();  
  57. }  
  58. });  
  59. })  
  60. </SCRIPT>  
  61. <META content="MSHTML 6.00.2900.5803" name=GENERATOR></HEAD>  
  62. <BODY>  
  63. <form id="signupForm">  
  64. <div id="a">  
  65. <UL>  
  66. <LI><div><input type="text" name="password"></div> </LI>  
  67. <LI><input type="text" name="name"> </LI>  
  68. </UL>  
  69. </div>  
  70. </form>  
  71. </BODY></HTML>  

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选