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;

}

demo下载

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 ...

随机推荐

数据库多对多关联表（Python&MySQL）
Python Python对MySQL数据库操作使用的是sqlalchemy这个ORM框架 #一本书可以有多个作者,一个作者又可以出版多本书 from sqlalchemy import Table, ...
win8_64下安装paramiko
win8_64下安装paramiko C:\Python35\Scripts>easy_install paramiko 提示 C:\Python35\Scripts>python Pyt ...
NFS和mount常用参数详解
NFS权限参数配置 ro 只读访问 rw 读写访问 sync 所有数据在请求时写入共享 async NFS在写入数据前可以相应请求 secure NFS通过1024以下的安全TCP/IP端口发送 in ...
5.1---二进制数插入（CC150）
public class Solution { public static int binInsert(int n, int m, int i, int j) { // write code here ...
【Kubernetes】两篇文章搞懂 K8s 的 fannel 网络原理
近期公司的flannel网络很不稳定,花时间研究了下并且保证云端自动部署的网络能够正常work. 1.网络拓扑拓扑如下:(点开看大图) 容器网卡通过docker0桥接到flannel0网卡,而每个 ...
Bitmap vs 2Bitmap的实现
[本文链接] http://www.cnblogs.com/hellogiser/p/bitmap-vs-2bitmap.html [题目] 在2.5亿个整数找出不重复的整数,内存不足以容纳着2.5亿 ...
树形dp汇总
HDU 1520 HDU 2196 Codeforces 219D POJ 1155
用C#读取txt文件的方法
1.使用FileStream读写文件文件头: using System;using System.Collections.Generic;using System.Text;using System ...
Django~Databases
更换数据库 migrate 下哈 admin 要重新建立修改\mysite\settings.py DATABASES = { 'default': { 'ENGINE': 'd ...
Effective C++ -----条款45：运用成员函数模板接受所有兼容类型
请使用member function templates(成员函数模板)生成”可接受所有兼容类型“的函数. 如果你声明member templates 用于“泛化copy构造”或“泛化assignme ...

Validform 学习笔记---代码练习

Validform 学习笔记---代码练习的更多相关文章

随机推荐

热门专题