Form表单提交与Validform验证的那些事

不管是做登录、注册还是实体的添加、修改，我们都会用到表单，并且也会同时用到验证，这里结合Validform验证来详细说明form表单提交的内情。。

1. 引入文件

<link href="css/validate.css" rel="stylesheet" />
<script src="scripts/jquery/jquery-1.11.2.min.js"></script>
<script src="scripts/jquery/Validform_v5.3.2_min.js"></script>

2. form表单

<form method="post" action="register.aspx" id="register" runat="server">
    <div class="zczh">
        <h2>注册账号</h2>
        <div class="form-group">
            <dl>
                <dt><i>*</i> 用户名：</dt>
                <dd>
                    <asp:TextBox ID="userName" runat="server" ajaxurl="/tools/validreg.ashx?regType=validName" CssClass="form-control" datatype="s4-20" nullmsg="请输入用户名" errormsg="请输入4~20位字符" sucmsg=" " placeholder="4~20个字符,只接受字母和数字,建议用公司缩写"></asp:TextBox>
                </dd>
                <dd class="inline-block"></dd>
            </dl>
            <dl>
                <dt><i>*</i> 密码：</dt>
                <dd>
                    <asp:TextBox ID="txtPassword" runat="server" CssClass="form-control" TextMode="Password" datatype="*6-20" nullmsg="请设置密码" errormsg="密码范围在6-20位之间" sucmsg=" " placeholder="可由6-16位英文、数字及标点组成"></asp:TextBox>
                </dd>
                <dd class="inline-block"></dd>
            </dl>
            <dl>
                <dt><i>*</i> 确认密码：</dt>
                <dd>
                    <asp:TextBox ID="txtPassword1" runat="server" CssClass="form-control" TextMode="Password" datatype="*" recheck="txtPassword" nullmsg="请再次输入密码" errormsg="两次输入的密码不一致" sucmsg=" " placeholder="请再输入一次密码"></asp:TextBox>
                </dd>
                <dd class="inline-block"></dd>
            </dl>
            <dl>
                <dt><i>*</i> 电子邮箱：</dt>
                <dd>
                    <asp:TextBox ID="txtEmail" runat="server" ajaxurl="/tools/validreg.ashx?regType=validEmail"
                        CssClass="form-control" datatype="e" nullmsg="请输入电子邮箱" sucmsg=" " placeholder="格式如：****@163.com"></asp:TextBox>
                </dd>
                <dd class="inline-block"></dd>
            </dl>
            <dl>
                <dt><i>*</i> 手机号码：</dt>
                <dd>
                    <asp:TextBox ID="txtTel" runat="server" ajaxurl="/tools/validreg.ashx?regType=validPhone" CssClass="form-control" datatype="/^1(3|4|5|7|8)\d{9}$/" nullmsg="请输入手机号码" sucmsg=" " placeholder="请输入手机号码"></asp:TextBox>
                </dd>
                <dd class="inline-block"></dd>
            </dl>
            <dl>
                <dt><i>*</i> 图形验证码：</dt>
                <dd>
                    <asp:TextBox ID="txtImgCode" runat="server" ajaxurl="/tools/validCheckColorCode.ashx?regState=1" CssClass="form-control" datatype="*" nullmsg="请输入右侧图形验证码" sucmsg=" " placeholder="请输入右侧图形验证码" Width="215px"></asp:TextBox>
                    <div style="display: inline-block; vertical-align: middle; height: 40px; width: 80px; margin-top: -2px; overflow: hidden; border: 1px solid #ddd;">
                        <a href="javascript:void(0);" id="refreshCode">
                            <img id="imgVerify" src="ColorCheckCode.aspx?" title="看不清点击更换" align="absmiddle" onclick="this.src=this.src+'?'" style="cursor: pointer; height: 42px; margin-top: -1px; margin-left: -1px;" /></a>
                    </div>
                </dd>
                <dd class="inline-block"></dd>
            </dl>
            <dl>
                <dt><i>*</i> 短信验证码：</dt>
                <dd>
                    <asp:TextBox ID="txtTelCode" runat="server" CssClass="form-control" datatype="n6" nullmsg="请输入手机收到的短信验证码！" errormsg="请输入手机收到的短信验证码！" sucmsg="<font color='green'>恭喜您,验证成功！</font>"
                        ajaxurl="" Width="181px"></asp:TextBox>
                    <div style="display: inline-block; vertical-align: middle; margin-top:-8px; height: 38px;" id="divSend">
                        <a class="telcode" id="getCode" href="#">获取短信验证码</a>
                    </div>
                </dd>
                <dd class="inline-block"></dd>
            </dl>
            <div class="form-group1" id="divSubmit">
                <asp:Button ID="btnSubmit" runat="server" CssClass="btn input-submit" Text="立即注册" OnClick="btnSubmit_Click" />
            </div>
        </div>
    </div>
    <p class="ydxy center">
        <span>已有账号？<a href="member/Login.aspx">立即登录</a></span>
    </p>
</form>

3. js初始化表单验证

$(function () {
    var valid_rule = $("#register").Validform({
        datatype: {//传入自定义datatype类型，可以是正则，也可以是函数（函数内会传入一个参数）;
            "n6": /^\d{6}$/
        },
        tiptype: 2
    });
    $("#txtTel").blur(function () {
        $("#txtTelCode").attr("ajaxurl", "/tools/validreg.ashx?regType=validCode&ctype=1&phone=" + $('#txtTel').val());
    });
});

4. 手机号是否重复验证示例

#region //手机号验证
public void PhoneValid(HttpContext context)
{
    string txtTel = DTRequest.GetString("param");
    SqlParameter[] param = {
        new SqlParameter("@mobile", txtTel)
    };
    int count1 = int.Parse(DbHelperSQL.GetSingle("select count(id) from lab_users where mobile=@mobile", param).ToString());
    if (count1 == 0)
    {
        context.Response.Write("{ \"info\":\"<font color='green'>该手机号可用</font>\", \"status\":\"y\" }");
    }
    else
    {
        context.Response.Write("{ \"info\":\"该手机号已注册过，请更换！\", \"status\":\"n\" }");
    }
}
#endregion

5. 验证效果

当然这里只有密码是简单的使用validform的验证，其他都是采用ajax与validform的结合。
使用时注意事项如下：

(1) 如果仅仅使用validform的内置验证，在js中可直接简单的初始化就可以，如：$(“#register”).Validform({tiptype: 2})，里面的参数tiptype是表明要使用的错误提示方法，如果使用默认的可以去掉tiptype。

(2) 上述例子在js中可以自定义validform的验证，类似于在datatype属性中定义的“n6”，可以同样使用。

(3) 如用户名这样的验证是结合validform的内置验证与ajax的验证，即两种验证都有，其中ajax的验证可以使用属性ajaxurl指定相应的一般处理程序路径，具体使用可参考示例手机号重新验证方法。

(4) 因为手机号与短信验证码均需求验证，而我们又是必须先填手机号，在其验证通过并发送验证码（方法请参考ASP.NET发送手机短信验证码）后再对验证码进行验证，这里需要注意的是对验证码即控件txtTelCode的属性ajaxurl的设置必须是在对手机号验证通过后，这是一个先后顺序问题。这里采用的是在手机号控件的blur事件中设置，请参考上述js中的事件代码。

(5) 注意必须是submit的提交才会触发validform验证，这里的submit可以是type=”submit”的input控件，也可以是type=”submit”的button控件，当然如果你是用的服务器控件就更没问题了，因为所有服务器控件的事件都会触发validform的验证。