使用jQuery进行验证的MVC4剃须刀

本文关键字：MVC4 剃须刀 验证 jQuery 使用 | 更新日期: 2023-09-27 17:50:27

我输入了so代码来帮助验证我在c# MVC 4中的视图，它工作了:

jQuery代码:


 $("#CountryDDL").change(function () {
 if ($("#CountryDDL").val() == 'CA' || $("#CountryDDL").val() == 'US') {
    $("#submitButton").attr("onclick", "return false;");
 }
 else if ($("#CountryDDL").val() != 'CA' || $("#CountryDDL").val() != 'US') {
     $("#submitButton").removeAttr("onclick");
 }
});
 $("#ProvinceDDL, #StateDDL").change(function () {
 if ($("#ProvinceDDL").val() != 'NULL' || $("#StateDDL").val() != 'NULL') {
    $("#submitButton").removeAttr("onclick");
 }
 else if ($("#ProvinceDDL").val() == 'NULL' || $("#StateDDL").val() == 'NULL') {
     $("#submitButton").attr("onclick", "return false;");
 }
 });
:

这个jQuery最终帮助验证两个字段(技术上是三个)。如果用户选择了加拿大或美国，他们将被迫选择一个省或州，否则他们将无法提交。

问题:

然而，由于我有onclick返回false，它不允许对该页面上的其他字段进行验证。

是否有一种方法可以让c#运行其他字段的验证，并在点击的同时运行我的jQuery验证?

使用jQuery进行验证的MVC4剃须刀

对于您提到的条件验证，我使用傻瓜。参见这里asp.net MVC4中的条件验证

那么在jquery中你可以使用

$('.btnSubmit').on('click', function(e){
    if($('form').valid()){
    }else{
        e.preventDefault();
        var $validate = $('form').validate();
    }
});

所以它会触发验证，如果表单无效，那么prevent default会阻止提交发生。希望这对你有所帮助

警告你只实现客户端验证，我希望你有相应的服务器端验证。

解决问题的正确方法是为服务器端和客户端实现MVC验证器，以便您可以注释您的模型。下面是一个示例，将验证器添加到模型中将正确地与不显眼的MVC验证结合在一起，并且您将不必编写带有硬编码值的javascript。有很多验证器可以帮助你，比如[必选]和谷歌。

示例代码取自和另一个链接来帮助您。

-forms-and-validation http://www.asp.net/mvc/tutorials/hands-on-labs/aspnet-mvc-4-helpers

http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-validation-to-the-model 

public class Album
     {  
          [Required(ErrorMessage = "An Album Title is required")]
          [DisplayFormat(ConvertEmptyStringToNull = false)]
          [StringLength(160, MinimumLength = 2)]
          public string Title { get; set; }
          [Required(ErrorMessage = "Price is required")]
          [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
          [DataType(DataType.Currency)]
          public decimal Price { get; set; }
          [DisplayName("Album Art URL")]
          [DataType(DataType.ImageUrl)]
          [StringLength(1024)]
          public string AlbumArtUrl { get; set; }
     }
相关文章：