给表单加上验证

如有不明白的地方欢迎加QQ群14670545 探讨

我们在上一节讲了给文本框加上提示效果，这节我们来完善上一节的demo。

加上一些表单项的验证，比如email格式，正整数，不能为空.....，这时候我们需要一个jquery的表单验证插件，可以去官网上下载：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/
http://docs.jquery.com/Plugins/Validation

还需要一个扩展插件，以方便我们用中文，不然提示效果都是英文的。所以配合一个messages_cn.js：

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: CN
 */
jQuery.extend(jQuery.validator.messages, {
        required: "<font style=\"color:#f00; margin-left:5px;\">不能为空</font>",
        remote: "<font style=\"color:#f00;\">请修正该字段</font>",
        email: "<font style=\"color:#f00;\">电子邮件格式有误</font>",
        url: "<font style=\"color:#f00;\">请输入合法的网址</font>",
        date: "<font style=\"color:#f00;\">请输入合法的日期</font>",
        dateISO: "<font style=\"color:#f00;\">请输入合法的日期 (ISO)</font>",
        number: "<font style=\"color:#f00;\">请输入合法的数字</font>",
        digits: "<font style=\"color:#f00;\">只能输入整数</font>",
        creditcard: "<font style=\"color:#f00;\">请输入合法的信用卡号</font>",
        equalTo: "<font style=\"color:#f00;\">请再次输入相同的值</font>",
        accept: "<font style=\"color:#f00;\">请输入拥有合法后缀名的字符串</font>",
        maxlength: jQuery.validator.format("<font style=\"color:#f00;\">长度最多 {0} 个字符</font>"),
        minlength: jQuery.validator.format("<font style=\"color:#f00;\">长度最少 {0} 个字符</font>"),
        rangelength: jQuery.validator.format("<font style=\"color:#f00;\">长度要在 {0} 和 {1} 之间</font>"),
        range: jQuery.validator.format("<font style=\"color:#f00;\">请输入一个介于 {0} 和 {1} 之间的值</font>"),
        max: jQuery.validator.format("<font style=\"color:#f00;\">请输入一个最大为 {0} 的值</font>"),
        min: jQuery.validator.format("<font style=\"color:#f00;\">请输入一个最小为 {0} 的值</font>")
});

这里只是随便百度找的，好像有个更好的插件叫formValidator，有兴趣的在看完这一节可以去找下，然后配合练习下咯

考虑到我们的表单有很多种情况，所有验证的那个属性参数必然是个枚举。好的，现在我们把昨天的那个自定义放服务器控件重新修改一下。

新建一个枚举类ControlMenu.cs：

namespace CustomerWebControls
{
    /// <summary>
    /// 文本框样式类型
    /// </summary>
    public enum InputClassType
    {
        /// <summary>
        /// 文本框
        /// </summary>
        input,
        /// <summary>
        /// //文本域
        /// </summary>
        textarea
    }

    /// <summary>
    /// 验证类型
    /// </summary>
    public enum ValidataType
    {
        /// <summary>
        /// 不能为空
        /// </summary>
        required,
        /// <summary>
        /// 请修正该字段
        /// </summary>
        remote,
        /// <summary>
        /// 电子邮件格式有误
        /// </summary>
        email,
        /// <summary>
        /// 请输入合法的网址
        /// </summary>
        url,
        /// <summary>
        /// 请输入合法的日期
        /// </summary>
        date,
        /// <summary>
        /// 请输入合法的日期 (ISO)
        /// </summary>
        dateISO,
        /// <summary>
        /// 请输入合法的数字
        /// </summary>
        number,
        /// <summary>
        /// 只能输入整数
        /// </summary>
        digits,
        /// <summary>
        /// 请输入合法的信用卡号
        /// </summary>
        creditcard,
        /// <summary>
        /// 请再次输入相同的值
        /// </summary>
        equalTo,
        /// <summary>
        /// 请输入拥有合法后缀名的字符串
        /// </summary>
        accept
    }
}

然后我们来修改CCTextBox.cs：

using System;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CustomerWebControls
{
    [DefaultProperty("IsValidata"), ToolboxData("<{0}:CCTextBox runat=server />")]
    public class CCTextBox : TextBox, ICustomControl
    {
        /// <summary>
        /// 是否验证输入的合法性
        /// </summary>
        [Bindable(true), Category("Appearance"), DefaultValue(true), Localizable(true)]
        public bool IsValidata
        {
            get { return ViewState["IsValidata"] != null ? (bool)ViewState["IsValidata"] : false; }
            set { ViewState["IsValidata"] = value; }
        }

        /// <summary>
        /// 检测类型
        /// </summary>
        [Bindable(true), Category("Appearance"), DefaultValue(null), Localizable(true)]
        public ValidataType ValidataType
        {
            set { ViewState["ValidataType"] = value; }
            get { return ViewState["ValidataType"] != null ? (ValidataType)ViewState["ValidataType"] : ValidataType.required; }
        }

        /// <summary>
        /// 文本框的样式
        /// </summary>
        [Bindable(true), Category("Appearance"), DefaultValue(InputClassType.input), Localizable(true)]
        public InputClassType InputMolde
        {
            set { ViewState["InputMolde"] = value; }
            get { return ViewState["InputMolde"] != null ? (InputClassType)ViewState["InputMolde"] : InputClassType.input; }
        }

        protected override void OnPreRender(EventArgs e)
        {
            CssClass = InputMolde + (IsValidata == true ? " required " + ValidataType.ToString() : "");
            base.OnPreRender(e);
        }
        protected override void Render(HtmlTextWriter writer)
        {
            base.Render(writer);
        }
    }
}

生成一下，然后引用一下，拖一个CCTextBox到页面上去，然后我们添加下IsValidata和ValidataType属性，页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ccPage.aspx.cs" Inherits="MyWebSiteTest.Manager.ccPage" %>

<%@ Register Assembly="CustomerWebControls" Namespace="CustomerWebControls" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>测试封装的控件</title>
    <script src="../Js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../Js/formvalidator4.1.3/jquery.validate.min.js" type="text/javascript"></script>
    <script src="../Js/formvalidator4.1.3/messages_cn.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".input,.textarea").focus(function () {
                $(this).addClass("focus");
            }).blur(function () {
                $(this).removeClass("focus");
            });

            //输入框提示,获取拥有HintTitle,HintInfo属性的对象
            $("[HintTitle],[HintInfo]").focus(function (event) {
                $("*").stop(); //停止所有正在运行的动画
                $("#HintMsg").remove(); //先清除，防止重复出错
                var HintHtml = "<ul id=\"HintMsg\"><li class=\"HintTop\"></li><li class=\"HintInfo\"><b>" + $(this).attr("HintTitle") + "</b>" + $(this).attr("HintInfo") + "</li><li class=\"HintFooter\"></li></ul>"; //设置显示的内容
                var offset = $(this).offset(); //取得事件对象的位置
                $("body").append(HintHtml); //添加节点
                $("#HintMsg").fadeTo(0, 0.85); //对象的透明度
                var HintHeight = $("#HintMsg").height(); //取得容器高度
                $("#HintMsg").css({ "top": offset.top - HintHeight + "px", "left": offset.left + "px" }).fadeIn(500);
            }).blur(function (event) {
                $("#HintMsg").remove(); //删除UL
            });
        });
        $(document).ready(function () {
            $("#form1").validate();
        });
    </script>
    <link href="images/example.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">       
        <div style=" margin:0 auto; width:600px;">  
            <div style=" height:100px;"></div>
            <cc1:CCTextBox ID="CCTextBox1" runat="server" Width="200" IsValidata="true" ValidataType="email" HintTitle="提示" HintInfo="这是提示的内容你懂的" ></cc1:CCTextBox><br /><br />
            <asp:Button runat="server" ID="btnSubmit" Text="提交" CssClass="submit" />
        </div>
    </form>
</body>
</html>

如果不指定ValidataType属性，那么默认是不能为空的验证（当然，前提是IsValidata属性必须是true，否则不进行验证），OK，来测试下效果：