我在 blazor 中有一个 InputText，我想防止非数字字符，那么基本的 razor 和 c# 代码是什么？这是我需要它的工作方式，用户输入一个字符，它一起拒绝输入，并显示一条验证消息，说明只允许数字。到目前为止，我已经尝试过使用正则表达式的 datanotations 范围属性，但这并不拒绝非数字字符。
【问题讨论】：
标签： blazor blazor-server-side blazor-webassembly blazor-client-side asp.net-blazor
dinozaver 很好地回答了你的问题，但我想补充一些（我认为非常重要的）建议： 您没有义务使用 Blazor 的自定义控件，它们主要处理验证。
如果你想要一个数字输入，我建议只使用一个：
<input type="number" @bind="MyImportantNumber" />
@code
{
int MyImportantNumber { get; set; }
}
您可以获取更多信息Here。 HTML 数字输入允许您设置最小/最大值、微调器控件的步长等。此外，在移动设备上使用 html 数字控件会弹出一个数字键盘，用户可能会觉得方便。
【讨论】：
它实际上是一个 html/javascript 的东西。添加
onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
到您的 html 输入元素将阻止用户输入非数字。如果您需要显示验证消息，我宁愿使用类似
@oninput="async () => await isInputNumeric()"
在这个元素中然后创建函数
private async Task isInputNumeric() { // call javascript to check the what is inside you input element (what is the last character) and act accordingly -> show message and delete the non-numeric character OR carry on if input is numeric }
您必须使用 javascript，因为 blazor 还没有 c# 访问 html 元素的方式。
【讨论】：
我认为您可以使用 Html 标签来解决它，只需使用： 您可以在此处查看文档。 https://developer.mozilla.org/es/docs/Web/HTML/Element/input/number
【讨论】：
如果您进入 EditForm 上下文，您可以使用 blazor 组件 InputNumber 来编辑 Int32、Int64、Int16、Single、Double、Decimal。根据Blazor Docs，它呈现为：
<input type="number"/>
使用示例：
<EditForm Model="myObject">
<InputNumber @bind-Value="myObject.mydouble" />
<ValidationMessage For="()=> myObject.mydouble"/>
</EditForm>
@code {
private MyObject myObject = new MyObject();
class MyObject {
public double mydouble { get; set; }
}
}
感谢 ValidationMessage 组件，如果用户尝试输入非数字字符，则会显示一条消息。 绑定变量的类型可以由编译器推断，或者你可以明确指出：
<InputNumber TValue="double" @bind-Value="myObject.mydouble" />
【讨论】：
<input type="number">，人们会很快弄清楚他们需要做什么。
无法评论对方的答案，但效果很好！
添加到 Host.cshtml 中的脚本部分：
$(document).on("keypress",".numbers", function (e) {
return (e.charCode != 8 && e.charCode == 0 || (e.charCode >= 48 && e.charCode <= 57));
});
$(document).on("paste", ".numbers", function (e) {
e.preventDefault();
let paste = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
this.value = paste.replace(/\D/g, '');
this.dispatchEvent(new Event('change'));
});
您的输入必须包含 class="numbers":
<input type="text" class="numbers" @bind-value="@anyValue"/>
【讨论】：
你可以添加 jquery 作为助手。
<input type="text" @bind="Model" class="NumberOnly" />
并将这段代码放在 MainLayout.razor
<script>
$(document).on("keypress", ".NumberOnly", function(e){
return (e.charCode !=8 && e.charCode ==0 || (e.charCode >= 48 && e.charCode <= 57));
});
</script>
【讨论】：