关于验证表单插件Validform的用法

先说明下，这个是菜鸟教程。主要是写给自己和像我一样的菜鸟看的，高手勿喷！
Validform是一个很好的表单验证插件，作者写了很多方法，我们只要直接调用就好了。

使用方法
1、写入此插件必须的css，以及他的图片，在插件包里面有

/*==========以下部分是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;}

2、引入jquery.js，版本在1.4.3以上都可以
3、引入Validform_v5.3.2_min.js插件
4、主体代码列子

<form name="serinfoform" method="post" enctype="multipart/form-data" action="../doaction.php" class="registerform">
<table width="100%" border="0" class="tgteble">
<tbody>
<tr>
<td class="tgtdz"><span class="red">*</span>标题：</td>
<td>
<input name="title" type="text" value="" class="dgtxt" datatype="s5-16" errormsg="昵称至少5个字符,最多16个字符！" />
</td>
</tr>
<tr>
<td class="tgtdz"><span class="red">*</span>详细说明：</td><td>
<textarea name="rninfo" id="rninfo" class="tgjj" tip="请在这里输入您的意见。" errormsg="很感谢您花费宝贵时间给我们提供反馈，请填写有效内容！"  datatype="s" value="">请在这里输入您的意见。</textarea>
</td>
</tr>
<tr><td class="tgtdz"><span class="red">*</span>联系邮箱：</td><td>
<input type="text" value="" name="email" class="dgtxt" placeholder="请输入您常用的邮箱" datatype="e" />
</td>
</tr>
</tr>
<tr><td class="tgtdz"><span class="red">*</span>联系手机：</td><td>
<input name="phone" type="text" id="phone" value="" size="" class="dgtxt" datatype="m" placeholder="请填写正确的手机号，将成为您下次登录的账号！" />
</td>
</tr>
<tr><td class="tgtdz"><span class="red">*</span>登陆密码：</td><td>
<input class="dgtxt" type="password" errormsg="密码至少6个字符,最多18个字符！" datatype="*6-18" plugin="passwordStrength" class="inputxt" name="password" value="">
</td></tr>
<tr><td class="tgtdz"></td>
<td>
<input class="tjbnt" type="submit" name="Submit" value="提交">
</td></tr>
</tbody>
</table>
</form>

5、加上初始化JS代码

<script type="text/javascript">
$(function(){
    $(".registerform").Validform();  //就这一行代码！;
})
</script>

注意官方提供一些常规绑定方法

<!--ajax实时验证用户名-->
<input type="text" value="" name="name" datatype="e" ajaxurl="valid.php?myparam1=value1&myparam2=value2" sucmsg="用户名验证通过！" nullmsg="请输入用户名！" errormsg="请用邮箱或手机号码注册！"  />

<!--密码-->
<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间！" />
<!--确认密码-->
<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致！" />

<!--默认提示文字-->
<textarea tip="请在这里输入您的意见。" errormsg="很感谢您花费宝贵时间给我们提供反馈，请填写有效内容！"  datatype="s" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>

<!--使用swfupload插件-->
<input type="text" plugin="swfupload" class="inputxt" disabled="disabled" value="">
<input type="hidden" value="" pluginhidden="swfupload">

<!--使用passwordStrength插件-->
<input type="password" errormsg="密码至少6个字符,最多18个字符！" datatype="*6-18" plugin="passwordStrength" class="inputxt" name="password" value="">
<div class="passwordStrength" style="display:none;"><b>密码强度：</b> <span>弱</span><span>中</span><span class="last">强</span></div>

<!--使用DatePicker插件-->
<input type="text" plugin="datepicker" class="inputxt" name="birthday" value="">

内置的使用

内置基本的datatype类型有： * | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url
*：检测是否有输入，可以输入任何字符，不留空即可通过验证；
*6-16：检测是否为6到16位任意字符；
n：数字类型；
n6-16：6到16位数字；
s：字符串类型；
s6-18：6到18位字符串；
p：验证是否为邮政编码；
m：手机号码格式；
e：email格式；
url：验证字符串是否为网址。
自定义datatype的名称，可以由字母、数字、下划线、中划线和*号组成。
形如”*6-16”的datatype，Validform会自动扩展，可以指定任意的数值范围。如内置基本类型有”*6-16”，那么你绑定datatype=”*4-12”就表示4到12位任意字符。如果你自定义了一个datatype=”zh2-4”，表示2到4位中文字符，那么datatype=”zh2-6”就表示2到6位中文字符。

更多的使用方法查考官方的文档，非常详细了http://validform.rjboy.cn

关于验证表单插件Validform的用法

猜你喜欢