自己写的表单助手:formhelper

 之前做一个后台系统时需要大量的表单验证与重复操作,继而开发了这个formhelper,目的很明确:简化表单验证的步骤与工序。

举个栗子:

<script language="Javascript" src="/js/jquery.js"></script>
<script language="Javascript" src="/js/formhelper.js"></script>
<
form id="form1"> <input id="ipt1" type="text" /> <input id="ipt2" type="text" /> <input id="ipt3" type="text" /> <button type="submit" id="form_btn">submit</button> </form>

js代码如下:

    var subform;
    $(document)
        .ready(function () {
            subform = formhelper($("#form1"));
            subform.setbtn($("#submit_btn"));
        })

这样就可以使用了,表单元素会存放在form.item中,可以通过form.item来查看目前formhelper中的元素。

不过目前什么限制都没有。formhelper提供了几个表单判断的函数:

setmust,lessthan,morethan。看名字就能知道:setmust:设置为必填;lessthan:少于XXX;morethan:多于XXX;

setmust:

使用方法:

form.setmust(a,b,c);

或者:

form.setmust({name:[a,b,c]});

其中a,b,c为表单元素的name。

lessthan:

使用方法:

form.lessthan({a:100,b:20,c:80});

其中a,b,c为表单元素的name,值为限制数值。

morethan:

使用方法:

form.morethan({a:100,b:20,c:80});

与lessthan一样。

如果ipt1,2,3为必填,2少于11个字,3多于8个字。则之前的例子可改写为:

    var subform;
    $(document)
        .ready(function () {
            subform = formhelper($("#form1"));
            subform.setmust('ipt1', 'ipt2', 'ipt3');
            subform.lessthan({'ipt2':11});
            subform.morethan({'ipt3':8});
        })

为了使用方便,formhelper使用了链式引用,因此之前的实例可改写为:

    var subform;
    $(document)
        .ready(function () {
            subform = formhelper($("#form1"));
            subform.setmust('ipt1', 'ipt2', 'ipt3')
                   .lessthan({'ipt2':11})
                   .morethan({'ipt3':8});
        })

如果表单里面有多个按钮,有时根据浏览器的不同会误触,因此可以使用setbtn来指定提交的按钮:

form.setbtn('#btn');

有时候,表单的元素是会根据需要动态生成,那么这时候formhelper里面的item需要手动更新,因此formhelper有additem与removeitem两个方法,专门用来更新表单元素。

additem:

使用方法:

form.additem();

additem目前没有添加某个元素的功能,只能重新读取一遍表单中的元素来重建。

removeitem:

使用方法:

form.removeitem(a,b,c);

removeitem方法可以一次移除多个,其中a,b,c为表单元素的name。

而当点击按钮提交表单时,formhelper会自动进行表单的处理,目前的效果为在不通过的表单后面添加红字的警告,之后会设置返回值增加自定义功能。

github:http://git.oschina.net/shining77_671/formhelper/

原文地址:https://www.cnblogs.com/shining77/p/6928786.html