远程验证在ASP.NET CORE Razor页面和jquery验证中不起作用

时间:2019-09-12 22:44:00

标签: c# asp.net-core jquery-validate unobtrusive-validation razor-pages

我正在尝试在jquery中进行自定义客户端验证,并在asp核心2.2剃刀页中的一个输入字段上使用jquery的远程属性进行验证,并将ajax编码到cs文件的后面。它仅使用一个输入字段就可以很好地验证,但是如果我添加更多输入字段,则无法验证。带有远程的ajax调用根本不会在多个字段中触发,根本不会触发codebehind中的功能。

我猜这是多个formvalidate吗?我怎样才能解决这个问题。我真的尽力解决这个问题,但是很难。我可以通过服务器端验证来解决此问题,但是如果它在客户端起作用,我会很好。

.cs文件后面的代码

        [BindProperty]
        public InputModel Input { get; set; }

        public string ReturnUrl { get; set; }

        public class InputModel
        {
            [Required]
            [RegularExpression(@"^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$", ErrorMessage = "Not valid")]
            [Display(Name = "E-mail")]
            public string Email { get; set; }

            //[Required]
            [PersonalData]
            //[MaxLength(12)]
            [Display(Name = "Personalnumber")]
            [BindProperty(SupportsGet = true)]
            public string PersonalId { get; set; }
        }

Ajax调用的代码隐藏方法

        public JsonResult OnGetCheckPersonalId(string persNr = "") 
        {      
             return new JsonResult("Just a test");
        }

    In Page
            <form asp-route-returnUrl="@Model.ReturnUrl" method="post" class="register">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="Input.Email"></label>
                    <input asp-for="Input.Email" class="form-control" />
                    <span asp-validation-for="Input.Email" class="text-danger"> 
          </span>
                </div>
                <div class="form-group">
                    <label asp-for="Input.PersonalId"></label>
                    <input asp-for="Input.PersonalId" class="form-control personalid"  />
                    <span asp-validation-for="Input.PersonalId" class="text-danger"></span>
                </div>
                <button type="submit" class="btn btn-primary">Register</button>
            </form>

_layout:

<script src="~/node_modules/jquery/dist/jquery.js"></script>
<script src="~/node_modules/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js"></script>
<script src="~/node_modules/jquery-validation/dist/additional-methods.js"></script>
<script src="~/node_modules/bootstrap/dist/js/bootstrap.js"></script>

@RenderSection("Scripts", false)

在脚本中,我收到来自响应的自定义错误消息。

    @section Scripts {
              <script>
                $(function() {
                   $('form').validate({
                  rules: {
                    'Input.PersonalId': {
                        remote: {
                            type: 'GET',
                            dataType: 'json',
                            url: 'Register?handler=CheckPersonalId',
                            data: {
                                persNr: 'sdfsddfdff'
                            }
                        },
                        required: true
                    }
                },
                messages: {
                    'Input.PersonalId': {
                        remote: function() { return message; }
                    }
                }
            });
        });
    </script>
}

0 个答案:

没有答案