Question

我有一个带下拉列表和单个文本框的MVC3 / Razor表单。 Dropdown有2个选项可供选择OrderID或ClerkName。

如果用户选择OrderID，那么我想只接受数字[0-9]到文本框中，如果用户选择了ClerkName，那么我想只接受字符[a-z，A-Z]到文本框中。

我想在这里jQuery validaton..please帮助我朝这个方向发展。

这里我们需要检查两种情况下的验证，1。表单加载和2.关于DDL选择更改.....请帮助。

  @{
    ViewBag.Title = "Index";
}
@using (Html.BeginForm())
{
    <div id="mainP">
        <div>
            @Html.DropDownList("SearchBy", new[] {  new SelectListItem { Text = "Order ID", Value = "OrdId" },
                                                    new SelectListItem { Text = "Clerk Name", Value = "ClerkName" } })
            <br />
            @Html.TextBox("SearchedText", ViewData["SEARCHED_TEXT"] == null ? "" : ViewData["SEARCHED_TEXT"], new { @class = "search_text_area" })
            <br />
        </div>
        <input type="button" id="btnSubmit" value="Submit" />
    </div>

}
<script type="text/javascript">

    $(function () {



    });

</script>

Answer 1

我假设您真的想要：清除选择更改的输入（因为您的验证规则，它不再有效）并在提交时验证，而不是表单加载。

$(function(){
  // Get a reference to the controls we'll re-use throughout the program
  var searchedText = $("#SearchedText");
  var searchBy = $("#SearchBy");

  // Determine the validation regular expression
  function GetValidationRegex(){
    if (searchBy.val() == "OrdId")
      return /^[0-9]+$/;
    else
      return /^[a-zA-Z ]+$/;
  }

  // Define our on change handler
  function SearchByChangeHandler(){
    // Clear the input
    searchedText.val("");
  }

  // Bind the handler
  $("#SearchBy").change(SearchByChangeHandler);

  // Bind to the form submit to validate
  $("form").submit(function(){
    // Get the text
    var value = searchedText.val()
    // If no text, error case 1
    if (!value){
      alert("A value is required...");
      return false;
    } 
    // If doesn't match the validation expression for the current selection
    // this is your error case
    else if (value.match(GetValidationRegex()) == null){
      alert("Regex doesn't match...");
      return false;
    }

  });

});

Answer 2

您必须创建自定义验证规则：

jQuery.validator.addMethod("numbersXorLetters", function(value, element) {
    var isValid = false;
    if($("#SearchBy").val() == "OrdId")
        isValid = /^[0-9]*$/.test(value);
    if($("#SearchBy").val() == "ClerkId")
        isValid = /^[a-zA-Z]*$/.test(value);
    return this.optional(element) || isValid;
}, "Invalid value");

然后像这样应用：

$("#SearchBy").rules("add", {
  numbersXorLetters: true
});

希望这会有所帮助。干杯

单个文本框的条件验证

2 个答案: