asp.net MVC 不显眼的浏览器错误

Posted 2023-05-09

【中文标题】asp.net MVC 不显眼的浏览器错误

【英文标题】：Browser error in unobtrusive for asp.net MVC

【发布时间】：2019-05-13 09:02:33

【问题描述】：

我正在尝试使用不显眼的 Jquery 在客户端进行验证，但出现了问题。 像所附图片一样的错误：

这是我的代码：

*在 BundleConfig.cs 中

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-version.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*", "~/Scripts/jquery.unobtrusive*"));

*在母版页中：

<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

*在视图模型类中：

public class EmployeeViewModel
    
        public int? EmployeeId  get; set; 

        [MaxLength(length: 10, ErrorMessage = "First name can't be more than 10 charechers")]
        [Required(AllowEmptyStrings = false, ErrorMessage = ("First name is required!"))]
        public string FirstName  get; set; 

        [MaxLength(length: 10, ErrorMessage = "First name can't be more than 10 charechers")]
        [Required(AllowEmptyStrings = false, ErrorMessage = ("Last Nmae is required!"))]
        public string LastName  get; set; 

        [MaxLength(length: 20)]
        public string FullName  get; set; 

        [Range(500, 1500, ErrorMessage = "Salare must be between 500 DK and 1500 DK")]
        [Required(AllowEmptyStrings = false, ErrorMessage = ("Salary is required!"))]
        public double Salary  get; set; 

        [EmailAddress(ErrorMessage = "Invalid Email")]
        [Required(AllowEmptyStrings =false,ErrorMessage =("Email is required!"))]
        public string Email  get; set; 
        public bool IsMarriage  get; set;  = false;
        public string Gender  get; set; 
        public string DepartmentName  get; set; 

        [Required(AllowEmptyStrings = false,ErrorMessage ="Birth day is required")]
        //[DataType(DataType.Date)]
        public DateTime? BirthDate  get; set; 

        public TimeSpan? StartWorkingTime  get; set; 

        public TimeSpan? EndWorkingTime  get; set; 
        public int? DepartmentId  get; set; 
    

*在视图中：

@using (html.BeginForm("Save","Employee",FormMethod.Post))
    
        <div class="form-group ">
            <div class="row">
                <div class="col-md-2 col-form-label">
                    @Html.LabelFor(e => e.FirstName, "First Name")
                </div>
                <div class="col-md-10">
                    @Html.TextBoxFor(e => Model.FirstName, new  @class = "form-control" )
                    @Html.ValidationMessageFor(e => e.FirstName, "", new  @class = "text-danger text-left" )
                </div>

            </div>

        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-2">
                    @Html.LabelFor(e => e.LastName, "Last Name")
                </div>
                <div class="col-md-10">
                    @Html.TextBoxFor(e => Model.LastName, new  @class = "form-control" )
                    @Html.ValidationMessageFor(e => e.LastName, "", new  @class = "text-danger text-left" )
                </div>
            </div>
        </div>

**客户端验证不工作，但服务端工作正常的问题

【参考方案1】：

我认为您的 MaxLength 属性语法可能存在问题。应该是

[MaxLength(10, ErrorMessage = "名字不能超过 10 个字符。")]

但是对于客户端验证，不要使用 MaxLength 属性，您应该尝试将其替换为 StringLength 属性。

[StringLength(10, ErrorMessage = "名字不能超过10 charechers.")] [必需(AllowEmptyStrings = false, ErrorMessage = ("名字是必填项！"))] 公共字符串名字 得到；放;

【讨论】：

我用 StringLength 替换 MaxLength 但它不起作用

你能不能试着把焦点放在薪水输入上，然后让它失去焦点。 Range 和 Required 验证器是否在处理此输入？如果没有，是否有任何脚本错误？

它也不起作用，它给了我同样的脚本错误，无法读取 call

【参考方案2】：

我知道这是一个有年头的问题，但可能会帮助可能来这里寻找答案的人。 首先，提问者没有完整地发布代码，所以很难得出结论我们究竟为什么会得到错误（什么是未定义的）。我没有看到定义表单输入的规则和消息的 jquery 客户端验证规则。 除了他所做的之外，他还需要有如下客户端验证规则： 这个例子是一个简单的注册表单，包括电子邮件、密码和确认密码作为文本输入。代码如下：

$('#registerFormId').validate(  
    errorClass: 'help-block animation-slideDown', 
    // You can change the animation class for a different entrance animation - check 
     animations page  
    errorElement: 'div',  
    errorPlacement: function (error, e)   
        e.parents('.form-group > div').append(error);  
    ,  
    highlight: function (e)   

        $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');  
        $(e).closest('.help-block').remove();  
    ,  
    success: function (e)   
        e.closest('.form-group').removeClass('has-success has-error');  
        e.closest('.help-block').remove();  
    ,  
    rules:   
        'Email':   
            required: true,  
            email: true  
        ,  

        'Password':   
            required: true,  
            minlength: 6  
        ,  

        'ConfirmPassword':   
            required: true,  
            equalTo: '#Password'  
          
    ,  
    messages:   
        'Email': 'Please enter valid email address',  

        'Password':   
            required: 'Please provide a password',  
            minlength: 'Your password must be at least 6 characters long'  
        ,  

        'ConfirmPassword':   
            required: 'Please provide a password',  
            minlength: 'Your password must be at least 6 characters long',  
            equalTo: 'Please enter the same password as above'  
          
      
);  

请确保您的文本输入的名称应与您要验证的属性相同。 除此之外，请确保在 web.config 中启用客户端验证不显眼，如下所示：

这是一篇很棒的博文，它解释了如何使用 jquery 非侵入式验证来实现客户端和服务器端验证。

https://www.c-sharpcorner.com/article/asp-net-mvc5-jquery-form-validator/#:~:text=Server%20side%20form%20validation%2C%20as,with%20ASP.NET%20MVC5%20platform.

阿斯玛·谢赫 注意：以上博文不是我写的