Javascript 如何验证前端和后端的必填字段

我正在创建我的表单，我需要对一些字段进行一些验证，这些字段在前面和后面都是强制性的，在正式填写之前不允许发送

以下是带有字段的表单

申请人 身份证件： 全名： 电邮：

---

在Html中发送，您可以简单地使用所需的标记，并且有许多jquery库可以为您提供验证，还可以显示弹出的自定义消息。

创建一个模型类：

public class MyData {
  [Required]
  [StringLength(9)]
  [Display(Name="Id")]
  public string ticketIdAppliInput {get;set;}
  [Required]
  public string ticketNameAppliInput {get;set;}
  [Required]
  public string ticketEmailAppliInput {get;set;}
}

将控制器更改为将此类作为输入：

[HttpPost]
public ActionResult CreateNewTicket(MyData data) {
  if (ModelState.IsValid)
    return Json(...);
  return View(data);
}

然后更改您的视图以实际使用该类我将为您执行第一个输入：

@model MyData
@using (Html.BeginForm())
{
  <div id="informacionTicket" class="user">
    <div class="card shadow mb-4">
      <div class="card-header py-3">
        <h4 class="m-0 font-weight-bold text-primary">
          Applicant</h4>
      </div>
      <div class="card-body">
        <div class="mb-4">
          <div class="form-group">
            @Html.LabelFor(model=>model.ticketIdAppliInput)
            @Html.TextboxFor(model=>model.ticketIdAppliInput, new { @type="text", @class="form-control form-control-user"})
            @Html.ValidationMessageFor(model=>model.ticketIdAppliInput)
          </div>
          <div class="form-group">
            <label for="ticketNameAppliInput">Full name:</label>
            <input maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user" />
          </div>
          <div class="form-group">
            <label for="ticketEmailAppliInput">Email:</label>
            <input maxlength="100" id="ticketEmailAppliInput" type="email" name="email" class="form-control form-control-user" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <button type="button" id="submit" class="btn btn-primary btn-user btn-block">Send</button>
}

---

我不确定我是否遇到了问题，但您可以隐藏submit按钮，并有一个change事件来检查是否所有字段都已填充。如果是，则显示按钮；如果不是，则保持隐藏状态。至于后端部分，您可以使用正则表达式来检查您是否得到了所需的内容，这也有助于防止注入另一个选项是捕获提交事件并防止其发生，然后使用您自己的处理程序来验证字段：如果您使用JQuery，您可以使用.preventDefault和.stopPropagation来实现这一点。您可以给我一个示例，说明如何进行更改事件，以验证是否所有字段都已填充为什么不向所有必需的输入添加必需的属性？您已标记此c，但此处没有c代码。最后，JavaScript函数在上下文之外没有任何意义。如果需要帮助，请将您的问题包含在接收此数据的后端代码中。@MauricioCárdenas您不需要jQuery来使用preventDefault，您只需要它，而不需要stopPropagation，这也不需要jQuery。我宁愿不更改我已经创建的html标记，您还有一些其他选择您的当前视图当前无法处理显示来自服务器的错误消息，因此您需要解决这个问题。但是如果你真的想继续沿着这条路走下去。。。然后，您需要更改输入，以便在出错时也将您的POST中的值放回输入中。然后通过编写自定义javascript在客户端处理所有验证。您将花费更多的时间来避免以正确的方式进行验证，而不仅仅是以正确的方式进行验证。如果您使用的是MVC框架，那么您不应该试图避免创建和使用模型。。。这毕竟是MVC中的M。HTML required属性不会验证后端的输入。因此，这些属性应该被视为一种html渐进增强，而不是可信的。绕过它太容易了，所以您还需要在服务器端执行相同的检查。