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 ...
随机推荐
- phpcms图片模型调用组图的问题
phpcms里面有个图片模型,之前一直没有用过,之前用的轮播图是用文章+缩略图+推荐位实现的 今天看了一下图片模型添加内容的地方,和平常的文章相比多了一个组图的地方:
- struts2 模型驱动
public class User3Action extends ActionSupport implements ModelDriven<User> { private User use ...
- jdbc事务处理和连接池
JDBC: * JDBC概念:Java DataBase Connectivity(Java数据库连接) SUN公司提供的一组连接数据库API. * JDBC开发步骤: * 1.注册驱动. * 2.获 ...
- hdu4117
题意:给出一串单词,每个有一个权值.顺序不变的情况下,删掉一些,使得相邻两单词,前一个是后一个的子串.同时要求使得剩余单词权值和最大.求最大是多少. 分析: AC自动机+线段树+DP. 这是一个比较复 ...
- c++ 引用和指针
1.引用 程序把引用和它的初始值绑定在一起,而不是将初始值拷贝给引用.一旦初始化完成,引用将和它的初始值对象一直绑定在一起.因为无法令引用重新绑定到另外一个对象,因此引用必须初始化. int ival ...
- 安装CentOS 7时出现No Caching mode page found问题的解决
将CentOS 7镜像刻到U盘之后,向服务器安装时,使用U盘启动会出现两种启动选项,一种是UEFI启动选项,一种是默认的启动选项,如果不使用UEFI方式安装,那么一般是没有问题的,如果选择UEFI方式 ...
- 100m和1000m网线的常见制作方法
100m和1000m网线的常见制作方法 100m和1000m网线的常见制作方法: 5类线(100m)的制作: a: 绿白(3).绿(6).橙白(1).蓝(4).蓝白(5).橙(2).棕白(7).棕(8 ...
- ABAP 内表的行列转换-发货通知单2
*&---------------------------------------------------------------------* *& Report Z_TEST_C ...
- code vs1506传话（塔尖）+tarjan图文详解
1506 传话 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 题目描述 Description 一个朋友网络,如果a认识b,那么如果a第一次收到 ...
- 利用冒泡对List排序
SysMenu是List集合中的类型,在这是一个菜单实体. public List<SysMenu> selfMenuSort(List<SysMenu> list) { fo ...