验证表单输入不为空

Question

我有这个表单提交代码..

<input type="submit" runat="server" id="buttonSubmit" value="Add" style="width:100px;" />

我的 BeginForm 是这样的..

<% using (Html.BeginForm("Insert", "StudentController", FormMethod.Post, new { @id = "exc-" }))
       {%>

我的视图中有一个文本框我需要检查我的文本框是否为空 显示警告框说请在文本框中输入一些值 其他明智的去控制器..

请任何人帮帮我？

谢谢

Answer 1

您可以通过多种方式做到这一点，但最简单的方法可能是在您的 ViewModel 上使用数据注释。比如——

public class MyViewModel
{
    [Required]
    public string MyProperty { get; set; }
}

现在在您的视图中使用

<% Html.EnableClientValidation(); %>

就在您开始表单之前。这将导致在发送给客户端的标记中发出一个 JavaScript 对象。脚本看起来像这个例子

<script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"The First Name field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"LastName","ReplaceValidationMessageContents":false,"ValidationMessageId":"LastName_validationMessage","ValidationRules":[{"ErrorMessage":"The Last Name field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"EmailAddress","ReplaceValidationMessageContents":false,"ValidationMessageId":"EmailAddress_validationMessage","ValidationRules":[{"ErrorMessage":"The Email Address field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"ZipCode","ReplaceValidationMessageContents":false,"ValidationMessageId":"ZipCode_validationMessage","ValidationRules":[{"ErrorMessage":"Zip Code must be 5 character long.","ValidationParameters":{"minimumLength":0,"maximumLength":5},"ValidationType":"stringLength"},{"ErrorMessage":"Zip Code must be five digits.","ValidationParameters":{"pattern":"\\d{5}"},"ValidationType":"regularExpression"},{"ErrorMessage":"The Zip Code field is required.","ValidationParameters":{},"ValidationType":"required"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"valSumId"});
//]]>
</script>

此对象包含验证元数据，客户端验证插件可以使用这些元数据来连接客户端上的验证。 ASP.NET MVC 2 附带的插件是 Microsoft AJAX 验证器，您需要在页面中包含这些脚本才能使用验证（MicrosoftAjax.js、MicrosoftMVCAjax.js 和 MicrosoftMvcValidation.js 按此顺序）。

或者，如果您更熟悉 jQuery，您可以在 MvcFutures 源代码中获取一个脚本，该脚本将验证挂钩到 jQuery 验证插件（这不是一个完全成熟的脚本，并且缺少一些部分，例如获取客户端验证摘要）。脚本是MicrosoftMvcJQueryValidation.js，你可以得到它here

使用数据注解的优势在于您还可以获得服务器端验证，并且您的客户端和服务器端验证将验证预期值。此外，数据注释允许您从属性中为字段标签设置错误消息和名称（错误消息和显示名称*也可以来自资源文件）

*因为 MVC2 是针对 .NET 3.5 版本的 Data Annotations 编译的，所以无法从资源文件中设置显示名称。有一个解决方法 - DisplayName attribute from Resources?。

---

现在很简单

---

只需在表单上设置提交事件处理程序

var form = document.getElementById('exc-');
var oldSubmit = form.onsubmit || function() {};
form.onsubmit = function() {
    var input = document.getElementById('myinput');
    if (input.value === '') {
        alert('please Enter some value in textbox');
        return false;
    }
    oldSubmit();
}

或使用 jQuery

$('#exc-').submit(function() {
    if ($('#myinput').val() === '') {
        alert('please Enter some value in textbox');
        return false;
    }              
});