自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢
<!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>
分享到：
相关推荐
在本文中，我们将深入探讨如何利用jQuery Validate来创建自定义验证样式。 首先，我们从标题"jquery validate 验证自定义样式"开始。jQuery Validate插件默认提供了一些基本的样式，但这些样式可能不能满足所有设计...
jQuery Validate 是一个强大的客户端验证插件，用于在用户提交表单前进行实时验证。这个框架大大简化了HTML表单的验证过程，提供了丰富的内置验证规则和可扩展的自定义验证功能，使得表单验证更加人性化和高效。 1....
jQuery Validate 默认提供了一套简单的样式，但往往需要与现有的前端框架（如Bootstrap、Foundation等）或自定义CSS样式相融合。以下是一些关键步骤： 1. **覆盖默认样式**：jQuery Validate 使用`error`、`valid`...
1. 引入必要的库：首先，你需要在页面中引入 jQuery、jQuery Validate 和 PoshyTip 的 JavaScript 文件，以及 PoshyTip 的 CSS 样式文件。这些文件通常存储在项目的 `js` 和 `css` 目录下。 2. 初始化 PoshyTip：在...
2. **初始化验证**：使用`jQuery`选择器找到需要验证的表单元素，并调用`.validate()`方法，配置相应的验证规则。例如，对于密码字段，可能有`required`（必填）、`minlength`（最小长度）和自定义的正则表达式规则...
3. 错误提示：提供多种错误提示方式，包括在元素附近显示错误消息、使用CSS样式标记错误元素等。 4. 国际化：支持多语言，可以轻松切换不同的语言环境。 5. 高度可扩展性：允许开发者根据需求定制验证逻辑，添加新的...
下面是一段示例代码，展示了如何通过jQuery选择器和CSS样式来改变错误提示的位置： ```javascript if (box.attr("tipBottom")) { tip.css({ display: "block", left: box.offset().left, top: box.offset().top...
包括`jquery.validate.js`作为核心验证框架，`additional-methods.js`包含了一些额外的验证方法，`messages_cn.js`用于本地化消息，以及`jquery.validate.css`定义了验证时的样式。 以下是一个基本的`jQuery ...
4. **验证元素样式**：通过 CSS 类自动应用错误状态样式，使得用户能直观识别问题所在。 5. **支持组验证**：可以定义一组输入字段，只有当所有字段都有效时，表单才被认为是有效的。 6. **多国语言支持**：提供多种...
在`jQuery Validate`的使用中，`formValidator.2.5.2\css\template.css`文件通常包含了样式定义，用于定制验证错误提示的外观。描述中提到“不要引入”可能是因为这个特定的样式文件与用户的项目样式冲突，或者用户...
同时，为了实现视觉反馈，需要准备CSS样式来处理不同验证状态下的样式变化，例如，鼠标悬停、聚焦、成功和错误状态。 2. **内置验证规则**： jQuery Validate提供了多种内置的验证规则，如`required`（必填）、`...
《jQuery Validate修改版：提升表单验证体验》 在网页开发中，用户输入的验证是不可或缺的一环，它能够确保用户提交的数据符合预期，避免无效数据的产生，从而提高用户体验和服务器端处理效率。jQuery Validate插件...
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来...
在Web开发中，jQuery Validate和Bootstrap是两个非常重要的工具，它们分别用于表单验证和界面美化。当将这两个插件结合使用时，可能会遇到一些兼容性问题，但通过正确配置和理解它们的工作原理，可以实现无缝集成，...
#### 三、style.css样式文件详解 style.css文件定义了两种主要样式： - `label.error`：当表单项验证失败时应用此样式，表现为红色文字，并附有“叉”图标的背景，以直观提示错误。 - `label.valid`：验证成功时...
刚刚研究了jqueryvalidate表单验证插件， 加了一些样式，出错提示和验证通过的提示，通过ajaxSubmit()异步提交表单 对input select 标签进行了...适合初学jqueryvalidate， 高手可以不用下载 想必对css样式也不会感兴趣
jQuery Validate插件是基于jQuery库的一个轻量级验证插件，它提供了丰富的验证规则和自定义验证方法，可以轻松地为表单添加验证功能。该插件的主要特点包括： 1. 易于使用：通过简单的API，开发者可以快速为表单...
jQuery Validate插件作为一款强大的JavaScript验证工具，广泛应用于各种表单验证场景，包括手机注册表单验证。本文将深入探讨jQuery Validate插件的使用方法，以及如何将其应用于手机注册表单的验证。 一、jQuery ...
jQuery Validate 提供了多种错误消息显示方式，如在元素后面插入错误消息，或者使用CSS类来改变样式。 ```javascript $("#myForm").validate({ errorElement: "div", errorPlacement: function(error, element) {...