如何在 mvc3 中开发水印表单验证？

Question

我是 mvc3 的新手。我想使用 Jquery Watermark 效果开发表单验证。 如果发生任何错误，文本框边框会以红色突出显示，并且仅在文本框中显示错误验证。

我的模型是这样的，

public class Registration
    {
        [Required]
        [Display(Name = "Name")]
        public string Name { get; set; }

        [Required]
        [Display(Name = "Email")]
        public string Email { get; set; }

        [Required]
        [Display(Name = "Phone No")]
        public string PhoneNo { get; set; }

        [Required]
        [Display(Name = "City")]
        public string City { get; set; }

        [Required]
        [Display(Name = "Country")]
        public string Country { get; set; }
    }

我的查看页面代码是这样的

@model WaterMarkFormInput.Models.Registration
<script type="text/javascript">
    $(document).ready(function () {
        $('#name').Watermark("Your Name");
        $('#email').Watermark("Your Email");
        $('#phoneno').Watermark("Your PhoneNumber");
        $('#city').Watermark("Your City");
        $('#country').Watermark("Your Country");
    })

</script>

<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.watermarkinput.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Registration</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Name, new { id="name"})
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Email, new { id = "email" })
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PhoneNo)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.PhoneNo, new { id = "phoneno" })
            @Html.ValidationMessageFor(model => model.PhoneNo)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.City, new { id = "city" })
            @Html.ValidationMessageFor(model => model.City)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Country)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Country, new { id = "country" })
            @Html.ValidationMessageFor(model => model.Country)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

运行我的应用程序时，它会显示如下图所示的水印效果。

http://i.imgur.com/CTMiS.png

但是当我按下创建按钮表单验证停止工作。 当我评论脚本以应用水印时，它会像这样显示我的表单验证

http://i.imgur.com/HyvJs.png

但我想要文本框中的验证文本，我该怎么做？ 等待回复:)

Answer 1

水印和验证不是一回事。 （我敢肯定我对你说的不是新东西，但请按照我的想法） 但是，它们都以非常相似的方式定义，即通过数据注释。 你这样做是为了验证。 要定义水印，请执行以下操作：

[Display(Name = "Name", Description = "This is tooltip", Prompt = "This is watermark")]
public string Name { get; set; }

在<YourApp>/Views/Shared/ 内创建名为EditorTemplates 的文件夹，并在<YourApp>/Views/Shared/EditorTemplates 内为您需要水印以下列方式出现的所有类型定义String.cshtml、Text.cshtml、Multiline.cshtml 等：

更新

这是String.cshtml，Text.cshtml 剃须刀视图（其中 2 个）放入 <YourApp>/Views/Shared/EditorTemplates 文件夹（看起来完全一样，除了文件名）：

结束更新

// string, text 
@Html.TextBox(string.Empty, ViewData.TemplateInfo.FormattedModelValue, new
{
    @class = "text-box single-line",
    placeholder = ViewData.ModelMetadata.Watermark,
    title = ViewData.ModelMetadata.Description
})

更新

这是<YourApp>/Views/Shared/EditorTemplates/MultilineText.cshtml 剃刀视图：

结束更新

// multiline
@Html.TextArea(string.Empty, ViewData.TemplateInfo.FormattedModelValue.ToString(), 0, 0, new
    {
        @class = "text-box multi-line",
        placeholder = ViewData.ModelMetadata.Watermark,
        title = ViewData.ModelMetadata.Description
    })

在视图中你调用@EditorFor(m => m.Name)。

这些是 HTML5，工作起来就像一个魅力（在 Chrome 和 IE9 中测试）

希望对你有帮助

更新

编辑器模板正如名称所暗示的那样 - 编辑器模板，因此当您在视图中调用 EditorFor 并在共享下共享字符串或文本的编辑器模板时，您有效地更改了字符串或文本等的默认值 -它是如何显示的，在这种情况下，您将默认显示它，添加几个 html5 参数，如占位符（水印）和标题（工具提示）。您可以在视图模型中定义它们的值，为水印添加提示 = 为工具提示添加描述 =。它基本上是 ASP MVC 定义和 HTML5 之间的映射：

• Description 成为工具提示（行业名称）并在 html5 中称为 title
• Prompt成为水印（行业名称），在html5中称为placeholder