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:99999; 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;
}
