jquery结合CSS使用validate实现漂亮的验证
自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢
<!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+css实现非常漂亮的水平导航菜单效果，包括了jQuery+css实现非常漂亮的水平导航菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery+css实现非常漂亮的水平导航菜单效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 用到的背景图片tab.gif如下： 具体代码如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQu
-
本文向大家介绍jQuery实现的漂亮表单效果代码，包括了jQuery实现的漂亮表单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的漂亮表单效果代码。分享给大家供大家参考。具体如下： 这是一款基于jQuery的漂亮的表单效果，将表单的输入框换成了横线，加入了背景，引入了jQuery插件，样式上特别漂亮，是一个值得借鉴的jQuery表单美化实例，而且本表单在布局上完全
-
我们的博客看起来仍然很丑吧？是时候来让它变得更好看了！为此，我们将引入CSS。 什幺是 CSS？ 层叠样式表(Cascading Style Sheets)是一种语言，用来描述使用标记语言(如HTML)写成的网站的外观和格式。把它当做我们网站的化妆 ;)。 但我们不想总是从零开始，对吧？ 我们将会再一次采用程序员们编写并发布到互联网上的免费玩意。 重新发明轮子十分无趣，你懂的。 让我们用 Boot
-
本文向大家介绍实用又漂亮的BootstrapValidator表单验证插件，包括了实用又漂亮的BootstrapValidator表单验证插件的使用技巧和注意事项，需要的朋友参考一下 本文推荐一款twitter做的bootstrapValidator.js，本身bootstrap就是twitter做的，那么使用原配的validator也就更值得信赖。从百度上搜bootstrapValidator会
-
本文向大家介绍jquery实现漂亮的二级下拉菜单代码，包括了jquery实现漂亮的二级下拉菜单代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下： 这里介绍一款基于jquery实现的网站下拉菜单，黑色风格，很漂亮，本菜单需要点击主菜单后的小三角符号才下拉出二级菜单，并不是有些菜单，是鼠标移上主菜单的时候就滑过，至于哪一
-
本文向大家介绍jquery validate和jquery form 插件组合实现验证表单后AJAX提交，包括了jquery validate和jquery form 插件组合实现验证表单后AJAX提交的使用技巧和注意事项，需要的朋友参考一下 要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件——jquery validate.js 和 jquery form.js.具体详细