jquery表单验证插件使用简介

在做表单的时候，常常会遇到要进行本地或者ajax验证，每次都自己来写js手动验证感觉太麻烦了，所以就到网上找了一些插件，最初找到的是一款基于prototype的插件validation.js，但是平时我更常用的是JQuery，不幸的是这两个插件之间存在冲突(因为都使用了$)，虽然有解决办法但心里总不太舒服。后来找到了JQuery.validate插件，这个插件相当简单，简单地基本用不着它自己写代码也差不多，所以也同样不喜欢。

 

最后找到了JQuery的插件formValidator，作者博客是：http://www.cnblogs.com/wzmaodong  插件的用法挺方便挺自由，而且手册写得也可以，还有demo页面非常不错。

使用起来需要引入四个文件：

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="js/formValidator.js"></script>
<script type="text/javascript" src="js/formValidatorRegex.js"></script>
<link rel="stylesheet" type="text/css" href="css/validator.css"/>

 

然后给每个要验证的表单元素设置一个唯一的id，再加上几句代码就可以用了。

比如HTML：

<form id="loginForm">
                    <p>
                        <label>
                            用户名：
                            <input type="text" id="loginName"/>
                            <span id="loginNameTip"></span>
                        </label>
                    </p>
                    <p>
                        <label>
                            密码：
                            <input type="password" id="loginPassword"/>
                            <span id="loginPasswordTip"></span>
                        </label>
                    </p>
                    <p>
                        <input type="submit" value="登陆" />
                    </p>
                </form>

在页面加载完成之后执行如下JS代码：

    /*
     * 设置表单验证
     */
    $.formValidator.initConfig( {
        formid : "loginForm",
        onerror : function(msg) {
            alert(msg)
        },
        onsuccess : function() {
            alert('success!!');
            return false;
        }
    });

 

    $("#loginName").formValidator( {
        onshow : "请输入用户名,只有输入\"maodong\"才是对的",
        onfocus : "用户名至少6个字符,最多10个字符",
        oncorrect : "该用户名可以注册"
    }).inputValidator( {
        min : 6,
        max : 10,
        onerror : "你输入的用户名非法,请确认"
    }).regexValidator( {
        regexp : "username",
        datatype : "enum",
        onerror : "用户名格式不正确"
    });

    $("#loginPassword").formValidator( {
        onshow : "请输入密码",
        onfocus : "密码不能为空",
        oncorrect : "密码合法"
    }).inputValidator( {
        min : 4,
        empty : {
            leftempty : false,
            rightempty : false,
            emptyerror : "密码两边不能有空符号"
        },
        onerror : "密码不能为空，且至少4个字符,请确认"
    });

 

这样就可以实现简单的动态本地验证了,更多的怎样使用可以参考作者提供的手册跟demo文件。