如何在不提交表单的情况下进行客户端远程验证？

Posted 2023-05-09

【中文标题】如何在不提交表单的情况下进行客户端远程验证？

【英文标题】：How to do client-side remote validation without submiting the form?

【发布时间】：2017-11-01 01:38:43

【问题描述】：

我实际上有一个 MVC.Net 表单，它使用一个视图模型，其字段具有 Required 和 Remote 属性。 Required 部分的客户端验证工作得非常好......但不像我对 Remote 的预期那样。

问题是在表单验证一次之前，我无法进行Remote 验证：

名称字段填充了现有用户名 - 没有显示错误，因为没有调用服务器 我验证了表单，进行了 ajax 调用以检查用户名的有效性，并显示错误消息 现在，每次我在用户名字段中输入内容时，都会进行 ajax 调用并相应地更新错误消息

这是模型：

public class TestModel

    [Required(ErrorMessage = "Name is Required")]
    [MinLength(3)]
    [Remote("CheckUserName", "CSValidationTest")]
    public string Name  get; set; 

观点：

@model TestModel
@
    ViewBag.Title = "Index";


@using (html.BeginForm())

    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Employee</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>


@section scripts

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

还有控制器：

public class CSValidationTestController : Controller

    public ActionResult Index()
    
        return View();
    

    public JsonResult CheckUserName(string userName)
    
        bool result = new Random().Next() > Int32.MaxValue / 2;

        if (result)
            return Json(true, JsonRequestBehavior.AllowGet);
        else
            return Json("Username already used, guid for call unicity : " + Guid.NewGuid().ToString(), JsonRequestBehavior.AllowGet);
    

另外，我无法删除 Required 属性，因为可以禁用或调整 javascript，并且使用 ModelState.IsValid 非常方便。

有没有办法在第一次提交之前调用远程规则？

【问题讨论】：

如果需要，请使用 JQuery Validation 功能，我将与您分享代码。

@LaxmanGite “JQuery 验证功能”是什么意思？

在提交表单之前在任何事件上尝试这种类型的代码：function isvalid() if ($("#DrpTest option:selected").val() == "") return "

我不明白这对我的远程验证有何帮助。

在您输入文本时远程验证正在工作，对吧？

【参考方案1】：

确保您已启用，这两个在 webconfig 文件中。

<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
</appSettings>   

【讨论】：

正如我所写的，“客户端验证对必需部分非常有效”。客户端验证效果很好，我实际上想改变它的行为:)

您已将 MinLength 设为 3，一旦名称值达到 minlength，每个按键请求都将转到 CheckUserName() 方法。