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>

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

Javascript 相关文章推荐
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
javascript每日必学之封装
Feb 23 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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
You might like
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
php轻松实现文件上传功能
2016/03/03 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
js判断屏幕分辨率的代码
2013/07/16 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
vue组件的写法汇总
2018/04/12 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Django URL传递参数的方法总结
2016/08/28 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
Python3运算符常见用法分析
2020/02/14 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
python使用建议与技巧分享(一)
2020/08/17 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
幼儿园教师工作制度
2014/01/22 职场文书
亲子读书活动方案
2014/02/22 职场文书
行政助理工作职责范本
2014/03/04 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
高三励志标语
2014/06/05 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js