繁体   English   中英

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

How to validate mandatory fields in the front-end and back-end

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

以下是带有字段的表单。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <form> <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"> <label for="ticketIdAppliInput">Id:</label> <input maxlength="9" required id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user" /> </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> </form> <button type="button" id="submit" class="btn btn-primary btn-user btn-block">Send</button>

下面是发送数据的JavaScript function。

function f_submitForm() {
    form.append("ticketIdAppliInput", document.getElementById("ticketIdAppliInput").value);
    form.append("ticketNameAppliInput", document.getElementById("ticketNameAppliInput").value);
    form.append("ticketEmailAppliInput", document.getElementById("ticketEmailAppliInput").value);
}

更新:

添加最小可重现示例,形成 controller

[HttpPost]
public JsonResult CreateNewTicket()
        {
            var ticketIdAppliInput = Request.Form["ticketIdAppliInput"];
            var ticketNameAppliInput = Request.Form["ticketNameAppliInput"];
            var ticketEmailAppliInput = Request.Form["ticketEmailAppliInput"];

        try
        {
            using (var scope = new TransactionScope())
            {               
                var ticket = new TK_HD_TICKETS
                {
                    CUSTOMER_ID = ticketIdAppliInput,
                    CUSTOMER_FULLNAME = ticketNameAppliInput,
                    CUSTOMER_EMAIL = ticketEmailAppliInput,
                    };
                    var result = ticketCreate.CreateNewTicket(ticket);

                    // If the ticket was not saved, the transaction is finished and we return the error message
                    if (!result.Success)
                    return Json(new TicketResult
                    {
                        IsValid = false,
                        Error = "The ticket could not be created, please try again."
                    });
            }
        }catch (DbEntityValidationException ex)
        {
            // Failed to try to register data in the database
            foreach (var e in ex.EntityValidationErrors)
            foreach (var validationError in e.ValidationErrors)
                Console.WriteLine("Property: " + validationError.PropertyName + " Error: " +
                                  validationError.ErrorMessage);

            return Json(new TicketResult
            {
                IsValid = false,
                Error = "There was an error creating the ticket, please try again."
            });
        }
        }
2 个回复

自己创建一个 model class:

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;}
}

更改您的 controller 以将此 class 作为输入:

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

然后更改您的视图以实际使用此 class (我将为您做第一个输入):

@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>
}

在 Html 中,您可以简单地使用所需的标签,并且有很多 jquery 库将为您提供验证以及显示弹出自定义消息。

1 在前端或后端验证必填字段的正确方法是哪种?

我是后端开发的新手。 我已经编写了API来更新用户信息,其请求主体如下所示- 理想情况下,应该在前端[网站或电话]或后端[服务器端]或双方中验证地址类型[在我的情况下是家庭还是办公室]? 哪种方法可以验证地址类型? 如果我们在后端进行验证,这会导致性能问题吗? 注意-如果开发 ...

2 验证不是必填字段

我有三个下拉菜单来设置唯一的订单价值。 Html代码: - 在这些下拉列表中,我应用了一个过滤器。 指令代码: - 我想要的是如果用户在下拉列表中设置相同的值,即不唯一,则在保存按钮上它通知scope.notify("error", "Please set unique ...

3 验证必填字段

所有。 我使用播放框架,但在验证必填字段时遇到问题。 模型: 控制器: 视图: 如果从字段值name删除表格,保存时出现错误 怎么做对? ...

4 必填字段验证

我希望当我单击“更新”按钮时,它应验证用户是否为必填字段,我添加了电子必需的属性,但无法正常工作。 请查看此小提琴: http : //jsfiddle.net/NfPcH/669/ HTML: Js控制器: 请帮助我解决此问题。 谢谢。 ...

5 必填字段的前端验证,以单选按钮的值为条件

我有一个 Laravel Blade 表单,我在其中制作了如下所需的字段: 这有效,当我尝试提交没有name值的表单时,出现此错误: 但是,现在我有一个单选按钮和另一个名为postal_code字段: 如何使postal_code字段成为必需,但postal_code是单选按钮设置为值 ...

6 grails 中的必填字段验证

我是 Grails 的新手,想知道如何在 Grails gsp 或控制器上设置必需的字段验证。 例如:如果用户没有输入其用户名,那么我应该提示一条消息说 用户名是必需的。 我从哪里开始? ...

7 javascript中的必填字段验证

我尝试使用此代码来验证空字段,但是当调用javascript而不是专注于Textbox时,它无法正常工作,并且代码将继续执行。 HTML代码: 脚本 ...

8 如何在JTable中验证必填字段

我有一个JTable,我需要验证2列的输入。 那就是2个特定的列需要在每个单元格中包含适当的值。 如果他们这样做,那么我想启用一个按钮。 我知道如何启用按钮,但我不知道在哪里/如何验证这2列。 哪种表模型方法是验证那些单元格并启用按钮(如果有)的合适位置? 我以为我需要这些单元格的侦听 ...

9 如何验证CodeIgniter中的非必填字段?

我正在CodeIgniter中构建API,并且在验证UPDATE方法时遇到了麻烦。 我的表有3列(加上ID): 名字 姓 市 我希望客户端能够更新3列中的任何一列,并将验证规则(例如min_length [1])应用于客户端要更新的每个列。 问题是,如果 ...

10 jQuery中的必填字段验证器

我想在表单字段中进行验证。 领域: 名称(文本框) -&gt;应输入值。 如果没有输入并出来,它将显示错误消息。 电子邮件(regex) -&gt;检查邮件格式 性别(单选按钮) -&gt;应该选择任何一个单选按钮 位置(下拉列表) -&gt;不输入下拉 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM