formValidator 表单验证小demo

<head runat="server">
    <title></title>
    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="js/formValidator.js" type="text/javascript"></script>
    <script src="js/formValidatorRegex.js" type="text/javascript"></script>
    <link href="css/validator.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $.formValidator.initConfig({ formid: "form1", onerorr: function (msg) { alert(msg) }, onsuccess: function () { alert("提交成功!"); return false; } });

//$.formValidator.initConfig({formid:"form1",alertmessage:true,onerror:function(msg){alert(msg)}});//

            $("#test1").formValidator({ onshow: "请输入用户名", onfocus: "用户名至少6个字符,最多10个字符", oncorrect: "该用户可以注册" }).inputValidator({ min: 6, max: 10, onerror: "不合法" });

            $("#password1").formValidator({ onshow: "请输入密码", onfocus: "密码不能为空", oncorrect: "密码合法" }).inputValidator({ min: 6, empty: { leftempty: false, rightempty: false, emptyerror: "密码两边不能有空格" }, onerror: "密码不能为空或少于6个字符" });

            $("#password2").formValidator({ onshow: "请输入重复密码", onfocus: "两次密码不许一致哦", oncorrect: "密码一致" }).inputValidator({ min: 6, empty: { leftempty: false, rightempty: false, emptyerror: "重复密码两边不能有空格" }, onerror: "重复密码不能为空" }).compareValidator({ desid: "password1", operateor: "=", onerror: "两次密码不一致" });

            $("#sfzh").formValidator({ onshow: "请输入15或18位的身份证", onfocus: "输入15或18位的身份证", oncorrect: "输入正确" }).functionValidator({ fun: isCardID });

            $("#email").formValidator({ onshow: "请输入邮箱", onfocus: "邮箱6-100个字符,输入正确了才能离开焦点", oncorrect: "恭喜你,你输对了", defaultvalue: "@", forcevalid: true }).inputValidator({ min: 6, max: 100, onerror: "你输入的邮箱长度非法,请确认" }).regexValidator({ regexp: "^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$", onerror: "你输入的邮箱格式不正确" });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table border="0px" style="font-size: 12px" width="630px">
        <tr>
            <td align="right">
                用户名:
            </td>
            <td>
                <input type="text" id="test1" style="width: 120px" value="maodong" />
            </td>
            <td>
                <div id="test1Tip" style="width: 250px">
                </div>
            </td>
        </tr>
        <tr>
            <td align="right">
                密码:
            </td>
            <td>
                <input type="password" id="password1" style="width: 120px" />
            </td>
            <td>
                <div id="password1Tip" style="width: 250px">
                </div>
            </td>
        </tr>
        <tr>
            <td align="right">
                重复密码:
            </td>
            <td>
                <input type="password" id="password2" style="width: 120px" />
            </td>
            <td>
                <div id="password2Tip" style="width: 250px">
                </div>
            </td>
        </tr>
        <tr>
            <td align="right">
                身份证号
            </td>
            <td>
                <input name="text2" type="text" id="sfzh" style="width: 150px" value="" />
            </td>
            <td>
                <div id="sfzhTip" style="width: 250px">
                </div>
            </td>
        </tr>
        <tr>
            <td align="right">
                电子邮箱:
            </td>
            <td>
                <input type="text" id="email" style="width: 120px" />
            </td>
            <td>
                <div id="emailTip" style="width: 250px">
                </div>
            </td>
        </tr>
    </table>
    <input type="submit" name="button" id="button" value="提交" />
    </form>
</body>

posted on 2011-10-28 14:49  李菲菲  阅读(1123)  评论(0编辑  收藏  举报