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

本文关键字：400个值 文本 数据 验证 | 更新日期: 2023-09-27 17:51:03

我正在尝试验证我的表单。我添加了一个文本框与自动完成。有时人们输入随机的东西，然后点击保存。

然而，我希望他们只使用自动完成数据。所以我在想，如果他们输入一些随机的东西，它会给出一个错误。

要做到这一点，我发现困难，需要一些指导。

我现在的代码是这样的:

文本框:

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

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

你可以这样做:

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

更多信息和演示请参见此。你也可以看到http://jsfiddle.net/pxfunc/j3AN7/

只是想知道，为什么不能检查数据中是否存在输入值?你可以在客户端做。由于您的数据在数组中，您可以检查输入的值是否存在于数组中。还是我错过了什么?

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

你的属性应该是

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

您可以像下面这样使用change event of autocomplete:

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

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

你可以使用typeahead.js。参考这个链接。

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

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

  • 一个用于客户端&另一个用于服务器端验证

希望这有帮助!!

相关文章：