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

  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. 项目冲刺Second

    Second Sprint 1.各个成员今日完成的任务 蔡振翼:完成管理员界面 谢孟轩:完成用户界面 林凯:完成登录界面 肖志豪:完成主界面 吴文清:创建数据库 刘华强:完成连接数据库,编写查询语句 ...

  2. NOI.AC NOIP模拟赛 第三场 补记

    NOI.AC NOIP模拟赛 第三场 补记 列队 题目大意: 给定一个\(n\times m(n,m\le1000)\)的矩阵,每个格子上有一个数\(w_{i,j}\).保证\(w_{i,j}\)互不 ...

  3. 16、Redis手动创建集群

    写在前面的话:读书破万卷,编码如有神 --------------------------------------------------------------------------------- ...

  4. Codeforces Round #511 (Div. 2)

    Codeforces Round #511 (Div. 2) #include <bits/stdc++.h> using namespace std; int n; int main() ...

  5. API网关的设计思路及落地 IT大咖说 - 大咖干货，不再错过

    API网关的设计思路及落地 IT大咖说 - 大咖干货,不再错过   http://www.itdks.com/dakashuo/new/dakalive/detail/1407

  6. 使用Puppeteer进行数据抓取(四)——图片下载

    大多数情况下,图片获取并不是很困难的事情,获取图片的url,然后模拟浏览器请求即可.但是,有的时候这种方法往往无法生效,常见的情形有: 动态图片,每次获取都是一个新的,例如图片验证码,重新获取时是一个 ...

  7. IDA .edata .rdata .idata .text segments

    .rdata is for const data. It is the read only version of the .data segment. .idata holds the import ...

  8. RDMA over TCP的协议栈工作过程浅析

    http://blog.chinaunix.net/uid-140205-id-2849342.html

  9. javascript 编辑网页

    javascript:document.body.contentEditable='true';document.designMode='on'; void 0 出处:http://zhidao.ba ...

  10. C#实现路由器断开连接，更改公网ip

    publicstaticvoid Disconnect() { string url ="断 线";    string uri ="http://192.168.1.1 ...