Javascript 验证文本框-数据必须来自自动完成（400个值）

我正在尝试验证我的表单。我添加了一个自动完成的文本框。有时人们输入随机内容并单击保存

但是，我希望他们只使用自动完成数据。所以我在想，如果他们输入一些随机的东西，就会出现错误

要做到这一点，我遇到了困难，需要一些指导

以下是我当前的代码：

文本框：

    <div class="genericFormText" id="test">Ticket SN:</div>
                        <div class="genericFormField">
                            @Html.TextBoxFor(m=>m.Form.Ser_Num) 
</div>

保存：

    var data = $("#ticketDetailsForm").serializeArray();

            $("#TicketDialog").load("@Url.Action("SaveInstallationTicketDetails", "SOP")", data, function () {
                //console.log("Saved suucessfully");
                alert("in save function");

后端代码：

    public PartialViewResult SaveInstallationTicketDetails(InstallationTicketDetailsForm Form, string JobTypeSelected)
    {
        var viewData = new InstallationTicketDetails(Form.Call_Num);
        Form.Save(User.Identity.Name, JobTypeSelected, viewData.SendCompany, viewData.RelayWeight);

        viewData = new InstallationTicketDetails(Form.Call_Num);
        viewData.Form = Form;
        return PartialView("_InstallationTicketDetails", viewData);
    }

对于我来说，验证文本框以确保不添加随机数据和只选择自动补偿数据的最佳方法是什么，任何想法或帮助都将不胜感激

---

是否可以使用if语句查看数据是否不等于自动完成，然后显示警报？

您可以使用自动完成的更改事件，如下所示：

change: function(event,ui)
        {
        if (ui.item == null)
            {
               $("#your_input_box").val('');
               $("#your_input_box").focus();
            }
        }

---

因为它所做的是不从自动完成ui中创建/选择条目。项将为空。因此，您可以很容易地了解用户是否选择自动完成条目，并限制随机值

您可以使用自动完成的更改事件，如下所示：

change: function(event,ui)
        {
        if (ui.item == null)
            {
               $("#your_input_box").val('');
               $("#your_input_box").focus();
            }
        }

---

因为它所做的是不从自动完成ui中创建/选择条目。项将为空。因此，您可以很容易地了解用户是否选择自动完成条目，并限制随机值

您可以这样做：

change: function( event, ui ) {
  if ( !ui.item ) {
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i" ), valid = false;

    select.children("option").each(function() {
      if ($(this).text().match(matcher)) {
        this.selected = valid = true;
        return false;
      }
    });

    if (!valid) {
      // remove invalid value, as it didn't match anything
      $(this).val("");
      select.val("");
      input.data("autocomplete").term = "";
      return false;
    }
  }
}

---

另外，有关更多信息和演示，请参见。您也可以看到

您可以这样做：

change: function( event, ui ) {
  if ( !ui.item ) {
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i" ), valid = false;

    select.children("option").each(function() {
      if ($(this).text().match(matcher)) {
        this.selected = valid = true;
        return false;
      }
    });

    if (!valid) {
      // remove invalid value, as it didn't match anything
      $(this).val("");
      select.val("");
      input.data("autocomplete").term = "";
      return false;
    }
  }
}

---

另外，有关更多信息和演示，请参见。此外，您可以查看您可以使用typeahead.js。参考这个

在客户端，您可以使用对DB的异步ajax调用填充400个值

然后在服务器端，您可以将所选的用户值与来自DB的值进行比较。
因此这里基本上会有2个DB调用

• 一个用于客户端，另一个用于服务器端进行验证

---

希望这有帮助

您可以使用typeahead.js。参考这个

在客户端，您可以使用对DB的异步ajax调用填充400个值

然后在服务器端，您可以将所选的用户值与来自DB的值进行比较。
因此这里基本上会有2个DB调用

• 一个用于客户端，另一个用于服务器端进行验证

---

希望这有帮助

只是想知道，为什么不能检查数据中是否存在输入的值？您可以在客户端执行此操作。由于数据位于数组中，所以可以检查数组中是否存在输入的值。还是我遗漏了什么

另一种方法是，您可以创建自己的自定义验证属性，然后在模型中使用该属性

你的属性应该是

public class DataExistanceAttribute: ValidationAttribute
{
    public override bool IsValid(object value)
    {
        if (value != null)
        {
            var repo = new Repo(); 
            //Cast it to the data type, i am just casting it to int...
            var enteredValue = (int)value;
            // Code to check if the entered value exists in the database...
            if (reop.DataToCheck.Find(value) == null)
            {
                return false;
            }
        }

        return true;
    }
}

然后在你的模型中

[DataExistance]
public string DataFieldToCheck {get;set;}

---

只是想知道，为什么不能检查数据中是否存在输入的值？您可以在客户端执行此操作。由于数据位于数组中，所以可以检查数组中是否存在输入的值。还是我遗漏了什么

另一种方法是，您可以创建自己的自定义验证属性，然后在模型中使用该属性

你的属性应该是

public class DataExistanceAttribute: ValidationAttribute
{
    public override bool IsValid(object value)
    {
        if (value != null)
        {
            var repo = new Repo(); 
            //Cast it to the data type, i am just casting it to int...
            var enteredValue = (int)value;
            // Code to check if the entered value exists in the database...
            if (reop.DataToCheck.Find(value) == null)
            {
                return false;
            }
        }

        return true;
    }
}

然后在你的模型中

[DataExistance]
public string DataFieldToCheck {get;set;}

---

---

你想要类似的东西吗？问题是有大约400个不同的数据，所以drop-down将不是理想的，我在考虑某种逻辑，它检查文本框是否与自动完成选项相同。当你只想允许某些值时，你应该使用列表框。某些值如400中所示。所以使用列表框并不理想。我想验证该框，使其与自动完成数据匹配，但现在确定如何执行。是否可以执行if语句，查看数据是否与自动完成数据不相等，然后显示警报？是否需要类似的内容？问题是大约有400个不同的数据，因此drop溺水将不理想，我在考虑某种逻辑，它检查文本框是否与自动完成选项相同。当您只想允许某些值时，应该使用列表框。某些值如400中所示。所以使用列表框并不理想。我想验证该框，使其与自动完成数据匹配，但现在确定如何执行。是否可以执行if语句，查看数据是否不等于自动完成数据，然后显示警报？谢谢，这正是我要查找的，现在，让我来尝试组合代码。我很高兴…如果它对你有帮助，请接受我的回答，一旦我让它工作起来。在你展示的3种方式中，哪一种最容易在我的代码上实现？你认为所有这些都很简单吗？但取决于你@malii快速查看了js fiddle示例，它说使用source:validOptions-但在我的自动完成中，我已经有了一个源“@url.action”谢谢，这正是我要找的，现在，让我来尝试组合代码。我很高兴…如果它对你有帮助，请接受我的回答，一旦我让它工作起来。在你展示的三种方式中，哪一种最容易在我的代码上实现？你认为所有这些都很简单吗？但取决于你@malii快速查看了js fiddle示例，它说使用source:validOptions-但在我的自动完成中，我已经有了一个源“@url.action”自动完成工作，我想要验证自动完成的东西自动完成工作，我想要验证自动完成的东西