validform使用

@官网下载地址

@官方文档

使用方法：

1，引入css和js（jquery 1.4.3 以上版本都可以）

 

<style type="text/css">
.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;}
</style>

<script type="text/javascript" src="jquery.2.1.1.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>

View Code

 

2，给需要验证的表单元素绑定附加属性

<form name="example" class="registerform">
<input type="text" name="newsPublisher" datatype="*1-5" errormsg="最多5个字符！" />

<input type="text" name="newsSource" datatype="*0-16"  errormsg="最多20个字符！" ignore="ignore" />

</form>

View Code

 

3,初始化

$(function(){
    //$(".registerform").Validform();  //就这一行代码！;  //官网这个是错误的，必须用下面的  
    
    var demo=$(".registerform").Validform({
        tiptype:3,
        label:".label",
        showAllError:true,
        datatype:{
            "zh1-6":/^[\u4E00-\u9FA5\uf900-\ufa2d]{1,6}$/
        },
        ajaxPost:true
    });
});

 

4.说明：

*：检测是否有输入，可以输入任何字符，不留空即可通过验证；
*6-16：检测是否为6到16位任意字符；
n：数字类型；
n6-16：6到16位数字；
s：字符串类型；
s6-18：6到18位字符串；
p：验证是否为邮政编码；
m：手机号码格式；
e：email格式；
url：验证字符串是否为网址。

zh2-4：2到4个中文字符！

其他详细介绍参见官方文档

转载于:https://www.cnblogs.com/yanan7890/p/6903683.html