您的位置：首页 > 编程语言

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

2015-10-10 21:06 706 查看
上一节主要梳理了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;
}


demo下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航