`
乌托邦之爱
  • 浏览: 282170 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

jquery validate的漂亮css样式验证

阅读更多

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

<!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>

 

4
3
分享到:
评论
6 楼 路人NFTS 2014-09-02  
很不实用!
5 楼 freezingsky 2013-03-13  
什么玩意这是!?
4 楼 maglic 2011-11-15  
不兼容ie啊。。
3 楼 395003679 2011-04-23  
不太实用
2 楼 乌托邦之爱 2011-04-09  
tianhandigeng 写道
什么东西啊 index.html打开就两个输入框 怎么提示啊


在两个输入框里输入数字或者英文试试呗,时间太长了 我有点忘了主要验证什么了,如果你会一些jquery的话看下源码应该就能知道是验证什么的,根据验证规则,你输入个违反验证规则的文字试试,提示效果不就得了
1 楼 tianhandigeng 2011-04-08  
什么东西啊 index.html打开就两个输入框 怎么提示啊

相关推荐

    jquery validate 验证自定义样式

    在本文中,我们将深入探讨如何利用jQuery Validate来创建自定义验证样式。 首先,我们从标题"jquery validate 验证自定义样式"开始。jQuery Validate插件默认提供了一些基本的样式,但这些样式可能不能满足所有设计...

    jQuery validate框架的个性化验证

    jQuery Validate 是一个强大的客户端验证插件,用于在用户提交表单前进行实时验证。这个框架大大简化了HTML表单的验证过程,提供了丰富的内置验证规则和可扩展的自定义验证功能,使得表单验证更加人性化和高效。 1....

    jQuery validate 自定义样式、规则

    jQuery Validate 默认提供了一套简单的样式,但往往需要与现有的前端框架(如Bootstrap、Foundation等)或自定义CSS样式相融合。以下是一些关键步骤: 1. **覆盖默认样式**:jQuery Validate 使用`error`、`valid`...

    jquery validate 信息气泡提示

    1. 引入必要的库:首先,你需要在页面中引入 jQuery、jQuery Validate 和 PoshyTip 的 JavaScript 文件,以及 PoshyTip 的 CSS 样式文件。这些文件通常存储在项目的 `js` 和 `css` 目录下。 2. 初始化 PoshyTip:在...

    jquery.validate表单验证密码完整例子(带密码强度显示)

    2. **初始化验证**:使用`jQuery`选择器找到需要验证的表单元素,并调用`.validate()`方法,配置相应的验证规则。例如,对于密码字段,可能有`required`(必填)、`minlength`(最小长度)和自定义的正则表达式规则...

    jquery validate依赖包及其帮助文档.rar

    3. 错误提示:提供多种错误提示方式,包括在元素附近显示错误消息、使用CSS样式标记错误元素等。 4. 国际化:支持多语言,可以轻松切换不同的语言环境。 5. 高度可扩展性:允许开发者根据需求定制验证逻辑,添加新的...

    jquery validate默认错误提示显示位置修改

    下面是一段示例代码,展示了如何通过jQuery选择器和CSS样式来改变错误提示的位置: ```javascript if (box.attr("tipBottom")) { tip.css({ display: "block", left: box.offset().left, top: box.offset().top...

    JQueryValidate验证说明

    包括`jquery.validate.js`作为核心验证框架,`additional-methods.js`包含了一些额外的验证方法,`messages_cn.js`用于本地化消息,以及`jquery.validate.css`定义了验证时的样式。 以下是一个基本的`jQuery ...

    Jquery validate和form插件

    4. **验证元素样式**:通过 CSS 类自动应用错误状态样式,使得用户能直观识别问题所在。 5. **支持组验证**:可以定义一组输入字段,只有当所有字段都有效时,表单才被认为是有效的。 6. **多国语言支持**:提供多种...

    jquery validate (弹框)

    在`jQuery Validate`的使用中,`formValidator.2.5.2\css\template.css`文件通常包含了样式定义,用于定制验证错误提示的外观。描述中提到“不要引入”可能是因为这个特定的样式文件与用户的项目样式冲突,或者用户...

    jQuery Validate表单验证插件实现代码

    同时,为了实现视觉反馈,需要准备CSS样式来处理不同验证状态下的样式变化,例如,鼠标悬停、聚焦、成功和错误状态。 2. **内置验证规则**: jQuery Validate提供了多种内置的验证规则,如`required`(必填)、`...

    Jquery Validate修改版

    《jQuery Validate修改版:提升表单验证体验》 在网页开发中,用户输入的验证是不可或缺的一环,它能够确保用户提交的数据符合预期,避免无效数据的产生,从而提高用户体验和服务器端处理效率。jQuery Validate插件...

    jquery validate表单验证插件手机注册表单验证代码

    jQuery Validate插件作为一款强大的JavaScript验证工具,广泛应用于各种表单验证场景,包括手机注册表单验证。本文将深入探讨jQuery Validate插件的使用方法,以及如何将其应用于手机注册表单的验证。 一、jQuery ...

    jquery.validate.css

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...

    Jquery Validate跟bootstrap插件的兼容

    在Web开发中,jQuery Validate和Bootstrap是两个非常重要的工具,它们分别用于表单验证和界面美化。当将这两个插件结合使用时,可能会遇到一些兼容性问题,但通过正确配置和理解它们的工作原理,可以实现无缝集成,...

    Jquery.validate表单验证小结

    #### 三、style.css样式文件详解 style.css文件定义了两种主要样式: - `label.error`:当表单项验证失败时应用此样式,表现为红色文字,并附有“叉”图标的背景,以直观提示错误。 - `label.valid`:验证成功时...

    jqueryvalidate验证demo 美化了表单元素

    刚刚研究了jqueryvalidate表单验证插件, 加了一些样式,出错提示和验证通过的提示,通过ajaxSubmit()异步提交表单 对input select 标签进行了...适合初学jqueryvalidate, 高手可以不用下载 想必对css样式也不会感兴趣

    jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮

    jQuery Validate插件是基于jQuery库的一个轻量级验证插件,它提供了丰富的验证规则和自定义验证方法,可以轻松地为表单添加验证功能。该插件的主要特点包括: 1. 易于使用:通过简单的API,开发者可以快速为表单...

    jquery.validate1.7验证插件最新版

    jQuery Validate 提供了多种错误消息显示方式,如在元素后面插入错误消息,或者使用CSS类来改变样式。 ```javascript $("#myForm").validate({ errorElement: "div", errorPlacement: function(error, element) {...

Global site tag (gtag.js) - Google Analytics