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

Question

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

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

为此，我遇到了困难，需要一些指导。

这是我当前代码的样子：

文本框：

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

自动完成代码：

$("#Form_Ser_Num").autocomplete({
            source: "@Url.Action("SerialProdNumStockSiteAutoComplete", "Ajax")?stocksitenum=LW&model=" + $("#Form_Prod_Num").val(),

            minlength: 2,
            delay: 300,
            select: function (event, ui) {
                event.preventDefault();
                event.target.innerText = ui.item.label.split(',')[0];
                $("#Form_Ser_Num_Source").val(ui.item.label.split(',')[1]);
            }
        });

保存：

    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 语句来查看数据是否不等于自动完成然后显示警报吗？

Answer 1

你可以这样做：

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

更多信息和演示请see this。另外你可以看到http://jsfiddle.net/pxfunc/j3AN7/

Answer 2

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

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

你的属性会是这样的

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

Answer 3

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

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

因为它所做的是没有从自动完成中创建/选择条目，所以 ui.item 将为空。因此，您可以轻松了解用户是否选择了自动完成条目并限制随机值。

Answer 4

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

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

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

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

希望这会有所帮助！！