formValidator用户注册表单自动验证

原文转至http://www.itivy.com/ivy/archive/2011/2/20/634338371453673322.html

用户注册是一个用得非常广泛的模块，不知道大家有没有遇到过这样的网站，你要提交一张表单，填了很多项，结果一提交就刷新页面，后来提示你用户名已 存在或验证码不正确等错误，等你回过头来，表单里的很多项又得重新填写，很烦那。如果有一种方法能使你在提交表单前验证各项是否符合系统要求，那可以为用 户节省很多时间，打打提高了用户体验。

接下来我向大家介绍一款自动表单验证插件formValidator，漂亮的验证结果提示、可扩展正则式支持、支持ajax验证、还支持自定义验证方案。先来看看大致效果，文章最后还会提供demo供大家学习参考

 在html文件中引入formValidator插件主脚本和样式文件，因为是基于jquery的，别忘记把jquery的主库脚本引入：

<link type="text/css" rel="stylesheet" href="/Scripts/FormValidator/style/validator.css" />
<link type="text/css" rel="stylesheet" href="/Scripts/css.css" />
<script type="text/javascript" src="/Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/Scripts/FormValidator/formValidator.js"></script>

邮箱和昵称的输入框html代码：

<form id="RegisterForm" action="/SubmitResult.aspx" method="post">
        <div class="block tip">
            <span class="pre_tip">注册邮箱:</span><input type="text" id="TxtEmail" name="TxtEmail"
                class="input_text" /><span id="TxtEmailTip" class="fv_tip" style=" 280px"></span>
        </div>
        <div class="block tip">
            <span class="pre_tip">注册昵称:</span><input type="text" id="TxtName" name="TxtName"
                class="input_text" /><span id="TxtNameTip" class="fv_tip" style=" 280px"></span>
        </div>
        <input type="submit" value="提交" class="input_btn" style="margin-left:50px" />
</form>

验证邮箱和昵称格式的js代码：

<script type="text/javascript">
    $(document).ready(function () {
       $.formValidator.initConfig({ formid: "RegisterForm", onerror: function (msg) { }, onsuccess: function () { } });//初始化，不可少
       $("#TxtEmail").formValidator({ onshow: "", onfocus: "可用来找回密码，必须真实有效", oncorrect: "正确" })
       .inputValidator({ min: 2, 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: "你输入的邮箱格式不正确" })
       .ajaxValidator({
            type: "post",
            url: "/ajax.ashx",
            datatype: "text/plain",
            success: function (data) {
                    if (data=="1")
                        return true;
                    else {
                        this.onerror = data;
                        return false
                    }
             },
             error: function () { alert("服务器没有返回数据，可能服务器忙，请重试"); },
             buttons: $("#BtnRegister"),
             onwait: "正在对注册邮箱合法性校验，请稍候..."
        });
        $("#TxtName").formValidator({ onshow: "", onfocus: "昵称必须是2-16个中文、数字、字母、下划线", oncorrect: "正确" })
        .inputValidator({ min: 2, max: 16, onerror: "昵称长度为2-16,请确认" })
         .regexValidator({ regexp: "^[\u4E00-\u9FA5\uF900-\uFA2D-\w]+$", onerror: "昵称必须是2-16个中文、数字、字母、下划线" });
    
   })
</script>

好了自动表单就这么简单，以下附上一个demo供大家参考。