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 razor视图（其中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 razor视图：

结束更新

// 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参数，如占位符（水印）和标题（工具提示）。您可以在视图模型中定义它们的值，为水印添加Prompt =，为工具提示添加Description =。它基本上映射ASP MVC定义和HTML5：

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

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

1 个答案: