forecho

把生命浪费在美好的事物上

使用表单验证插件 Validform

2012年10月16日

官方网址 先下载完整的示例文档。 调用如下两个文件(注意文件路径):

1
2
<script type="text/javascript" src="resources/scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="resources/scripts/Validform_v5.1_min.js"></script>

然后添加javascript代码(此处我使用的是示例2):

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(function(){
    //$(".registerform").Validform();  //就这一行代码!;

    $(".registerform").Validform({
        tiptype:2
    });
})
</script>

然后是表单的视图页面主要代码:

1
2
3
4
5
6
<p>
    <label>导航名称</label>
    <input class="text-input small-input" type="text" id="small-input" name="name" datatype="s2-10" errormsg="昵称至少2个字符,最多10个字符!" />
    <span class="Validform_checktip"></span>
    <br />
</p>

form表单的class是”registerform”。即:

1
class="registerform"

PS: 此处我表单的input与提示文字Validform_checktip 属于同一级标签,而官方给我们的是都有一个父级的td标签,所以我需要改官方的Validform_v5.1_min.js文件,找到下图代码 修改如下:

1
2
3
4
if(type==2 && o.obj){
o.obj.next(".Validform_checktip").html(msg);
    Validform.util.cssctl(o.obj.next(".Validform_checktip"),o.type);
}

即:删掉两处的parent和find。 更多的说明文档,请参考这里。   样式的话,只需调用如下三个即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 表单 */
.Validform_wrong {
    color: red;
    padding-left: 20px;
    white-space: nowrap;
    background: url(../images/error.png) no-repeat left center;
}
.Validform_right {
    color: #71B83D;
    padding-left: 20px;
    background: url(../images/right.png) no-repeat left center;
}
.Validform_checktip {
    margin-left: 8px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    color: #999;
    font-size: 12px;
}