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

  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="data: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>

jquery validate的漂亮css样式验证的更多相关文章

  1. 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  2. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

  3. 关于Jquery.validate.js中动态删除验证remove方法的Bug

    利用Jquery.validate.js 来做动态验证的时候,需要特定的情况下,删除添加opAmount的必须入力的Check $("#form").validate({ rule ...

  4. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  5. （转）jquery.validate.js 的 remote 后台验证

    之前已经有一篇关于jquery.validate.js验证的文章,还不太理解的可以先看看:jQuery Validate 表单验证(这篇文章只是介绍了一下如何实现前台验证,并没有涉及后台验证remot ...

  6. 转：jquery操作元素的css样式（获取、修改等等）

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  7. jquery.validate.js自定义表单验证

    $(document).ready(function() { //在下列位置输入页面加载的逻辑代码 $("#inputForm").validate({ rules: { seq: ...

  8. 使用jquery操作元素的css样式（获取、修改等等）

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  9. 使用jquery.validate组件进行前端数据验证并实现异步提交前验证检查

    学习如鹏网掌上组的项目开发,使用到了前端验证,视频里使用的ValidateForm验证框架,但是我使用的Hui的框架中使用的是jquery.validate验证框架 所以自行学习jquery.vali ...

随机推荐

  1. BZOJ.3624.[APIO2008]免费道路(Kruskal)

    题目链接 我们发现有些白边是必须加的,有些是多余的. 那么我们先把所有黑边加进去,然后把必须要加的白边找出来. 然后Kruskal,把必须要加的白边先加进去,小于K的话再加能加的白边.然后加黑边. 要 ...

  2. hdu 4612 边双联通 ***

    题意:有N 个点,M条边,加一条边,求割边最少.(有重边) 链接:点我 先求双连通分量,缩点形成一个生成树,然后求这个的直径,割边-直径即是答案 #pragma comment(linker, &qu ...

  3. BZOJ2085 : [Poi2010]Hamsters

    设g[i][j]为i串至少加上几个字符后才能包含j,可以通过Hash求出. 然后就是求经过m-1条边的最短路,用倍增加速Floyed即可,时间复杂度$O(n^3\log m)$. #include&l ...

  4. 吴恩达-coursera-机器学习-week9

    十五.异常检测(Anomaly Detection) 15.1 问题的动机 15.2 高斯分布 15.3 算法 15.4 开发和评价一个异常检测系统 15.5 异常检测与监督学习对比 15.6 选择特 ...

  5. Activemq+Zookeeper集群

    如果在同一台机器上请参考 http://blog.csdn.net/liuyifeng1920/article/details/50233067 http://blog.csdn.net/zuolj/ ...

  6. 再谈JavaScript中的闭包

    一.什么是闭包 闭包就是有权访问另一个函数作用域中变量的函数,因此,闭包的本质是一个函数.当一个内部函数被保存到外部时,就会生成闭包. 二.闭包的作用 1.实现公有变量,即通过局部变量实现全局变量的效 ...

  7. x270

    https://thinkpad.lenovo.com.cn/product/93964.html

  8. spring cloud 学习(5) - config server

    分布式环境下的统一配置框架,已经有不少了,比如百度的disconf,阿里的diamand.今天来看下spring cloud对应的解决方案: 如上图,从架构上就可以看出与disconf之类的有很大不同 ...

  9. MongoDB简单使用 —— 安装

    下载 MongoDB的下载路径为:MongoDB Download Center.Win.Linux.Mac平台的都有,光Win平台的就提供msi和zip绿色版本的,这里我下载的是zip版本的. 命令 ...

  10. AE开发中关于 “无法嵌入互操作类型.........请改用适用的接口”问题的解决方法

    最近开始使用VS2010,在引用COM组件的时候,出现了“无法嵌入互操作类型……,请改用适用的接口”的错误提示. 查阅资料,找到解决方案,记录如下: 选中项目中引入的dll,鼠标右键,选择属性,把“嵌 ...