给表单加上验证

如有不明白的地方欢迎加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，来测试下效果：