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

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

我的模型是这样的,

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>
}

@model WaterMarkFormInput.Models.Registration
$（文档）.ready（函数（）{
$（'#name'）。水印（“您的姓名”）；
$（'#email'）。水印（“您的电子邮件”）；
$（'#phoneno'）。水印（“您的电话号码”）；
$（“#城市”）。水印（“您的城市”）；
美元（“#国家”）。水印（“您的国家”）；
})
@使用（Html.BeginForm（））{
@Html.ValidationSummary（true）
登记处
@LabelFor（model=>model.Name）
@Html.TextBoxFor（model=>model.Name，新的{id=“Name”}）
@Html.ValidationMessageFor（model=>model.Name）
@LabelFor（model=>model.Email）
@Html.TextBoxFor（model=>model.Email，新的{id=“Email”}）
@Html.ValidationMessageFor（model=>model.Email）
@LabelFor（model=>model.PhoneNo）
@TextBoxFor（model=>model.PhoneNo，新的{id=“PhoneNo”}）
@Html.ValidationMessageFor（model=>model.PhoneNo）
@LabelFor（model=>model.City）
@Html.TextBoxFor（model=>model.City，新{id=“City”}）
@Html.ValidationMessageFor（model=>model.City）
@LabelFor（model=>model.Country）
@Html.TextBoxFor（model=>model.Country，新的{id=“Country”}）
@Html.ValidationMessageFor（model=>model.Country）


}

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

但当我按下“创建”按钮时，表单验证停止工作。 当我向appy watermark注释脚本时，它将显示我的表单验证，如下所示

@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>
}

但是我想要文本框中的验证文本，我如何才能做到这一点？

---

等待回复：）

水印和验证不是一回事。（我肯定我对你说的不是什么新鲜事，但请跟随我的想法） 然而，它们都是以非常相似的方式定义的，即通过数据注释。 你做得对是为了验证。 要定义水印，请执行以下操作：

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

在

/Views/Shared/

内部创建名为

EditorTemplates

的文件夹，在

/Views/Shared/EditorTemplates

内部定义String.cshtml、Text.cshtml、Multiline.cshtml等所有需要水印以以下方式显示的类型：

更新

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

// 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
    })

这是

String.cshtml

，

Text.cshtml

razor视图（其中两个）放入

/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
})

// 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
    })

更新

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

// 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
    })

这是

/Views/Shared/EditorTemplates/multilitext.cshtml

razor视图：

结束更新

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

// 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中测试）

希望这有帮助

更新

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

// 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

共享字符串或文本的编辑器模板时（如我所示），可以有效地更改字符串或文本等的默认值-它的显示方式，在这种情况下，可以按默认值显示，添加两个html5参数，如占位符（水印）和标题（工具提示）。您可以定义它们在视图模型中的值，并为水印添加提示=和为工具提示添加说明=。它基本上是ASP MVC定义和HTML5之间的映射：

• Description

  成为html5中的工具提示（行业名称）并被称为

  title

• 提示符

  成为水印（行业名称）并在html5中被称为

  占位符

---

：感谢您的回复。。你能详细说明一下EditorTemplates的用法吗。我应该在String.cshtml、Text.cshtml、Multiline.cshtml文件中放置什么。@B.Soni见答案。你1。用我提供的内容创建3个文件，2个。更新

显示
数据注释3。调用
EditorFor
而不是
TextFor
时，您的字段中突然出现水印和工具提示。自动：）祝你好运。希望这能有所帮助。几周前，我从这个网站上从人们那里学到了这项很好的技术，所以。。。继续问具体问题。期待有经验的人快速专业的回答。谢谢，祝你愉快！