Validform 学习笔记---代码练习
上一节主要梳理了validform的基础知识，针对这些基础知识，编写代码的时候，也整理的部分知识，先记录以便后期温习。
验证部分的css
@charset "utf-8";
/* CSS Document */ /*==========以下部分是Validform必须的===========*/
.Validform_checktip{
margin-left:8px;
line-height:20px;
height:20px;
overflow:hidden;
color:#999;
font-size:12px;
}
.Validform_right{
color:#71b83d;
padding-left:20px;
background:url(../images/right.png) no-repeat left center;
}
.Validform_wrong{
color:red;
padding-left:20px;
white-space:nowrap;
background:url(../images/error.png) no-repeat left center;
}
.Validform_loading{
padding-left:20px;
background:url(../images/onLoad.gif) no-repeat left center;
}
.Validform_error{
background-color:#ffe7e7;
}
#Validform_msg{color:#7d8289; font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; width:280px; -webkit-box-shadow:2px 2px 3px #aaa; -moz-box-shadow:2px 2px 3px #aaa; background:#fff; position:absolute; top:0px; right:50px; z-index:; display:none;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');}
#Validform_msg .iframe{position:absolute; left:0px; top:-1px; z-index:-1;}
#Validform_msg .Validform_title{line-height:25px; height:25px; text-align:left; font-weight:bold; padding:0 8px; color:#fff; position:relative; background-color:#000;}
#Validform_msg a.Validform_close:link,#Validform_msg a.Validform_close:visited{line-height:22px; position:absolute; right:8px; top:0px; color:#fff; text-decoration:none;}
#Validform_msg a.Validform_close:hover{color:#cc0;}
#Validform_msg .Validform_info{padding:8px;border:1px solid #000; border-top:none; text-align:left;}
HTML部分联系代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" type="text/css" href="css/myvalid.css">
<link rel="stylesheet" type="text/css" href="../Validform_v5.3.2/demo/css/demo.css">
<link rel="stylesheet" type="text/css" href="plugin/datePicker/datePicker-min.css">
<!--<script src="plugin/datePicker/jquery.bgiframe.min.js"></script>--> </head> <body>
<form id="demoform">
<ul>
<li>
<label class="label">账号：</label> <input type="text" value="" name="name" datatype="s5-16" errormsg="用户名必须是2到4位中文字符！" sucmsg="用户名还未被使用，可以注册！"/>
</li>
<li>
<span class="label">*用户名：</span><input type="text" val="" name="birthday" class="inputxt mr10" plugin="datepicker"/>
</li>
<li>
<input type="text" value="默认提示文字" class="gray intxt" tip="默认提示文字" altercss="gray" />
</li>
<li>
<input type="text" datatype="e" value="" errormsg="错误邮箱格式" sucmsg="邮箱通过验证"/>
</li>
<li>
<label>附件：</label>
<input type="text" value="" id="txtFileName2" disabled="disabled" autocomplete="off" class="inputxt" plugin="swfupload" /> <span id="spanButtonPlaceholder"></span> (10 MB max)
<input type="hidden" pluginhidden="swfupload" name="hidFileID" id="hidFileID" value="" />
</li>
<!--<li>
<input type="password" value="" name="password" class="inputxt" plugin="passwordStrength" datatype="*6-18" errormsg="密码至少6个字符,最多18个字符！" />
<div class="passwordStrength" >密码强度： <span>弱</span><span>中</span><span class="last">强</span></div>
<div class="Validform_checktip"></div>
</li>-->
<li>
<input type="password" value="" name="password" class="inputxt" plugin="passwordStrength" datatype="*6-18" errormsg="密码至少6个字符,最多18个字符！" />
<div class="Validform_checktip">密码至少6个字符,最多18个字符！</div>
<div id="passwordStrengthtx" class="passwordStrength" style="display:none;"><b>密码强度：</b> <span>弱</span><span>中</span><span class="last">强</span></div>
</li>
</ul>
<input type="submit" value="提交"/>
</form>
</body>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://validform.rjboy.cn/wp-content/themes/validform/js/jquery-1.6.2.min.js"></script>
<script src="js/Validform_v5.3.2.js"></script>
<script src="plugin/datePicker/jquery.datePicker-min.js"></script>
<script src="plugin/swfupload/swfuploadv2.2-min.js"></script>
<script src="plugin/swfupload/Validform.swfupload.handler-min.js"></script>
<script src="plugin/passwordStrength/passwordStrength-min.js"></script>
<script type="text/javascript">
$(function(){
var demo=$("#demoform").Validform({
tiptype:3,
dragonfly:true,
label:".label",
"*6-20": /^[^\s]{6,20}$/,
usePlugin:{
datepicker:{
format:"yyyy-mm-dd",//指定输出的时间格式;
firstDayOfWeek:1,//指定每周开始的日期，0、1-6 对应 周日、周一到周六;
callback:function(date,obj){//指定选择日期后的回调函数;
//date:选中的日期;
//obj:当前表单元素;
alert(date+" is selected");
},
//以上三个参数是在Validform插件内调用Datepicker时可传入的参数;
//下面几个参数是Datepicker插件本身初始化时可接收的参数，还有更多请查看页面说明;
clickInput:true,
startDate:"1970-00-00",
createButton:false
},
passwordstrength:
{
minLen:6,//设置密码长度最小值，默认为0;
maxLen:18,//设置密码长度最大值，默认为30;
trigger:function(obj,error)
{
//该表单元素的keyup和blur事件会触发该函数的执行;
//obj:当前表单元素jquery对象;
//error:所设密码是否符合验证要求，验证不能通过error为true，验证通过则为false; //console.log(error);
if(error){
obj.parent().next().find(".Validform_checktip").show();
//obj.parent().next().find(".passwordStrength").hide();
$("#passwordStrengthtx").hide();
}else{
obj.parent().next().find(".Validform_checktip").hide();
//alert('OK');
//obj.parent().next().find(".passwordStrength").show();
$("#passwordStrengthtx").show();
}
}
}
}
});
//demo.tipmsg.s="error! no message inputed.";
//$.Tipmsg.tit="Message Box";
});
</script> </html>
备注：
1、插件swfupload放在本地点击“打开”按钮没有反应，这个是flash的问题，放到IIS上就可以了
2、时间选择插件使用jquery-1.6版本可以，1.9版本没有响应；
3、passwordStrength插件对应的css放到demo.css中的部分样式如下：
.swfupload{
vertical-align:top;
}
.passwordStrength{
}
.passwordStrength b{
font-weight:normal;
}
.passwordStrength b,.passwordStrength span{
display:inline-block;
vertical-align:middle;
line-height:16px;
line-height:18px\9;
height:16px;
}
.passwordStrength span{
width:45px;
text-align:center;
background-color:#d0d0d0;
border-right:1px solid #fff;
}
.passwordStrength .last{
border-right:none;
}
.passwordStrength .bgStrength{
color:#fff;
background-color:#71b83d;
}
Validform 学习笔记---代码练习的更多相关文章
- CTR学习笔记&代码实现2-深度ctr模型 MLP->Wide&Deep
背景 这一篇我们从基础的深度ctr模型谈起.我很喜欢Wide&Deep的框架感觉之后很多改进都可以纳入这个框架中.Wide负责样本中出现的频繁项挖掘,Deep负责样本中未出现的特征泛化.而后续 ...
- CTR学习笔记&代码实现3-深度ctr模型 FNN->PNN->DeepFM
这一节我们总结FM三兄弟FNN/PNN/DeepFM,由远及近,从最初把FM得到的隐向量和权重作为神经网络输入的FNN,到把向量内/外积从预训练直接迁移到神经网络中的PNN,再到参考wide& ...
- CTR学习笔记&代码实现4-深度ctr模型 NFM/AFM
这一节我们总结FM另外两个远亲NFM,AFM.NFM和AFM都是针对Wide&Deep 中Deep部分的改造.上一章PNN用到了向量内积外积来提取特征交互信息,总共向量乘积就这几种,这不NFM ...
- CTR学习笔记&代码实现5-深度ctr模型 DeepCrossing -> DCN
之前总结了PNN,NFM,AFM这类两两向量乘积的方式,这一节我们换新的思路来看特征交互.DeepCrossing是最早在CTR模型中使用ResNet的前辈,DCN在ResNet上进一步创新,为高阶特 ...
- CTR学习笔记&代码实现6-深度ctr模型 后浪 xDeepFM/FiBiNET
xDeepFM用改良的DCN替代了DeepFM的FM部分来学习组合特征信息,而FiBiNET则是应用SENET加入了特征权重比NFM,AFM更进了一步.在看两个model前建议对DeepFM, Dee ...
- CTR学习笔记&代码实现1-深度学习的前奏LR->FFM
CTR学习笔记系列的第一篇,总结在深度模型称王之前经典LR,FM, FFM模型,这些经典模型后续也作为组件用于各个深度模型.模型分别用自定义Keras Layer和estimator来实现,哈哈一个是 ...
- Validform 学习笔记---基础知识整理
面对表单的验证,自己写大量的js毕竟不是一个明智的做法.不仅仅是代码很长而且不便于梳理.Validform就是一款开源的第三方验证js的控件,通过添加相应的js以及css能够有效的验证表单,维护起来也 ...
- c++语言的学习笔记代码与笔记注释《面向对象部分》
#include <iostream> /*这是C++中关于面向对象部分的具体笔记和代码 */ //定义类的语法形式; //类中的成员项目之间相互引用,直接使用成员; //类外引用成员的时 ...
- c++语言的学习笔记代码与笔记注释《函数部分》
具体的笔记以注释的形式写在代码内,每个知识点用函数的形式表现. #include <iostream>; #include<cmath> const double PI=3.1 ...
随机推荐
- 2.4---把链表划分为两部分（CC150）
注意,题目要求要保持两部分的相对顺序,所以,用交换是不行的. import java.util.HashSet; import java.util.Set; class ListNode{ int v ...
- Visual Studio 2010添加新项缺失[ADO.NET 实体数据模型]解决方法
当进行ASP.NET MVC项目开发,准备使用EF进行数据库访问,我的开发模式是"Table First".于是,准备在Model目录新建EF的数据表映射文件.可是,在添加新项目窗 ...
- phpcms访问顶级栏目，自动跳到第一个子栏目
在顶级栏目的category页放入如下代码: <?php if($child){ $child_arrary=explode(',',$arrchildid); $to_url=$CATEGOR ...
- STL---vector（向量）
1 基本操作 (1)头文件#include<vector>. (2)创建vector对象,vector<int> vec; (3)尾部插入数字:vec.push_back(a) ...
- mysql中表名是order的CRUD的错误
org.springframework.jdbc.BadSqlGrammarException: ### Error querying database. Cause: com.mysql.jdbc. ...
- 右下角浮窗&动画效果
2015-07-17 11:07:57 CSS #goreg { width: 70px; position: fixed; bottom: 20px; right: 25px; ; opacity: ...
- C# 反射+抽象工厂模式
此模式可以很好的更换程序使用不同的数据库 1.用到的属性类 using System; using System.Collections.Generic; using System.Linq; usi ...
- WebRequest 获取网页乱码
问题:在用WebRequest获取网页源码时得到的源码是乱码. 原因:1,编码不对 解决办法:设置对应编码 WebRequest request = WebRequest.Create(Url);We ...
- [转]Handler MessageQueue Looper消息循环原理分析
Handler MessageQueue Looper消息循环原理分析 Handler概述 Handler在Android开发中非常重要,最常见的使用场景就是在子线程需要更新UI,用Handler ...
- 创建一个没有边框的并添加自定义文字的UISegmentedControl
//个性推荐 歌单 主播电台 排行榜 NSArray* promoteArray=@[@"个性推荐",@"歌单",@"主播电台",@&quo ...