我有一个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}$",
})
我有两个场景
用户输入XY12345678901235无效,显示"Test Required Message"
- 当用户输入123455时,这也是无效的,但是我们应该显示不同的消息错误消息2
如何实现场景2?
谢谢
使用不引人注目的客户端验证(使用jquery.validate.js和jquery.validate.unobtrusive.js)将无法做到这一点,因为它只允许每个规则一条消息。相反,您可以通过编写自己的脚本来模拟该行为,以类似的方式处理此问题。
它有点不清楚为什么你手动添加这些data-val-*
属性时,它们被自动添加是你应用[Required]
和[RegularExpression]
属性到你的属性。首先将[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
并包含以下脚本来处理文本框.change()
事件以测试值(并在适用的情况下显示适当的消息)和表单提交事件以在无效时取消提交。
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
});
旁注:您当然需要在服务器端重复此验证。客户端验证是一个不错的好处,但可以被覆盖(永远不要相信用户输入)。