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="data: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漂亮的验证.zip (323 KB)
- 下载次数: 680
jquery validate的漂亮css样式验证的更多相关文章
- 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- jQuery所支持的css样式
jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...
- 关于Jquery.validate.js中动态删除验证remove方法的Bug
利用Jquery.validate.js 来做动态验证的时候,需要特定的情况下,删除添加opAmount的必须入力的Check $("#form").validate({ rule ...
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- （转）jquery.validate.js 的 remote 后台验证
之前已经有一篇关于jquery.validate.js验证的文章,还不太理解的可以先看看:jQuery Validate 表单验证(这篇文章只是介绍了一下如何实现前台验证,并没有涉及后台验证remot ...
- 转：jquery操作元素的css样式（获取、修改等等）
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- jquery.validate.js自定义表单验证
$(document).ready(function() { //在下列位置输入页面加载的逻辑代码 $("#inputForm").validate({ rules: { seq: ...
- 使用jquery操作元素的css样式（获取、修改等等）
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- 使用jquery.validate组件进行前端数据验证并实现异步提交前验证检查
学习如鹏网掌上组的项目开发,使用到了前端验证,视频里使用的ValidateForm验证框架,但是我使用的Hui的框架中使用的是jquery.validate验证框架 所以自行学习jquery.vali ...
随机推荐
- NOIp模拟赛 巨神兵(状压DP 容斥)
\(Description\) 给定\(n\)个点\(m\)条边的有向图,求有多少个边集的子集,构成的图没有环. \(n\leq17\). \(Solution\) 问题也等价于,用不同的边集构造DA ...
- STL中map的遍历
map作为STL中的映射容器非常好用,我们来说一下map的遍历. map.first为key值,map.second为value值,key不可修改,value可修改. 定义一个迭代指针iter,使其指 ...
- NOI 2002 荒岛野人
人生第一次做NOI的题祭!!! 大概是NOI最简单的一道题 克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些山洞顺时针编号为1,2,…,M.岛上住着N个野人,一开始依次住在山洞C1,C2,… ...
- 吴恩达-coursera-机器学习-week4
第八.神经网络:表述(Neural Networks: Representation) 8.1 非线性假设 8.2 神经元和大脑 8.3 模型表示1 8.4 模型表示2 8.5 样本和直观理解1 8. ...
- iOS图片设置圆角性能优化
问题 圆角虽好,但如果使用不当,它就是你的帧数杀手,特别当它出现在滚动列表的时候.下面来看圆角如何毁掉你的流畅度的. 实测 layer.cornerRadius 我创建了一个简单地UITableVie ...
- 使用 IntraWeb (16) - 基本控件之 TIWList、TIWListbox、TIWComboBox、TIWOrderedListbox
TIWList //列表; 它对应 Html 中的 OL.LI(某些选项下会用表格模拟); TIWListbox 和 TIWComboBox 则对应 Html 在的 Option TIWListbox ...
- STM32 F4 SPI Accelerometer
STM32 F4 SPI Accelerometer
- JavaScript进阶系列02,函数作为参数以及在数组中的应用
有时候,把函数作为参数可以让代码更简洁. var calculator = { calculate: function(x, y, fn) { return fn(x, y); } }; var su ...
- 如何获得ios7系统中的蓝色
最简洁的办法,直接使用下列代码: [UIColor colorWithRed:0.0 green:122.0/255.0 blue:1.0 alpha:1.0] 最彻底的办法: OS7Colors是U ...
- WordPress基础：get_page_link获取页面地址
函数:get_page_link(页面id编号) 作用:获取指定页面的链接地址 用法: $link = get_page_link(2); 输出为:xxx/?page_id=2 如在循环里则不用填写i ...