Javascript 为不同的用户输入显示不同的正则表达式消息

我有一个带有输入字段的MVC视图，它对一个正则表达式进行了验证，类似于这样的^XY[a-zA-Z0-9]{20}$

我的Html字段看起来像

 @Html.TextBoxFor(t => t.Someclass.Name, new
                {
                    data_val = "true",
                    data_val_required = "Test Required Message",
                    data_val_regex = "Test Invalid Regex Message",
                    data_val_regex_pattern = "^XY[a-zA-Z0-9]{20}$",

                })

我有两种情况

当用户输入XY1234567890135时，这是无效的，我们将显示“测试所需消息”

当用户输入123455时，这也是无效的，但我们应该看到另一条消息错误消息2

如何实现场景2

---

谢谢

您将无法使用不引人注目的客户端验证（使用jquery.validate.js和jquery.validate.unobtrusive.js）来完成此操作，因为每个规则只允许一条消息。相反，您可以通过编写自己的脚本来模拟行为，以类似的方式处理此问题

有点不清楚为什么在自动添加这些

数据val-*

属性时手动添加这些属性是因为您将

[必需的]

和

[正则表达式]

属性应用于您的属性。首先，将

[Required]

属性包含到属性中，以便以默认方式处理该属性

[Required(ErrorMessage = "...")]
public string Name { get; set; }

在我看来

@Html.TextBoxFor(m => m.Someclass.Name)
@Html.ValidationMessageFor(m => m.Someclass.Name) // for the [Required] error message
<span id="regexerror" class="field-validation-error"></span> // for the custom message

---

旁注：您当然需要在服务器端重复此验证。客户端验证是一个不错的奖励，但可以被覆盖（永远不要相信用户输入）。

如果您正在使用asp.net-mvc和asp.net，则可能希望将它们放在标记中。@JacqueGoupil，谢谢，我已编辑以包含asp.net mvc标记。如果您使用的是不引人注目的客户端验证，则您不能。但是您如何区分它们（即，显示第二条消息而不是第一条消息的标准是什么）？HI@StephenMuecke，当用户只输入12345时，我应该显示第二条消息，这是无效的，并且不包含作为正则表达式一部分的前两个字符XY。如果用户输入无效但仍然包含XY，我需要显示第一条错误消息。您不能使用验证属性或不引人注目的客户端验证来执行此操作。您需要编写自己的javascipt/jquery函数来处理输入

.change（）

事件，然后测试其是否有效并显示相应的错误消息（当然，您还需要在POST方法中执行相同的测试）

var isValid = true;
var regex = /^XY[a-zA-Z0-9]{20}$/;
var prefix = 'XY';
var errorMessage = $('#regexerror');

$('#Someclass_Name').change(function() {
  var name = $(this).val();
  if (!name) { // no value so let client side validation handle it
    return;
  }
  // test if we match the regex
  isValid = regex.test(name);
  if (isValid) {
    errorMessage.text(''); // clear error
  } else {
    if (name.indexOf(prefix) == 0) {
      errorMessage.text('error message 1'); // starts with XY
    } else {
      errorMessage.text('error message 2')
    }
  }
});

$('form').submit(function() {
  return isValid; // will cancel the default submit if false
});