Html 只允许在没有 Javascript 的输入标签中输入数字
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12533508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Only allow Numbers in input Tag without Javascript
提问by Yusuf
I am fairly new. I am creating a webpage that ask a user for their ID. I want it to be a required field and only allow numbers. I appreciate if you lead me in the correct direction. this is what I have so far.
我是新来的。我正在创建一个网页,要求用户提供他们的 ID。我希望它是必填字段并且只允许数字。我很感激你引导我走向正确的方向。这是我到目前为止。
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Search</title>
</head>
<body>
<div>
<table align="center">
<tr>
<td class="label">
Enter ID:
</td>
<td>
<input type="text" name="UserId" id="UserId" />
</td>
</tr>
</table>
</div>
</body>
</html>
回答by Brian
Though it's probably suggested to get some heavier validation via JS or on the server, HTML5 does support thisvia the pattern attribute.
虽然可能建议通过 JS 或在服务器上进行一些更重的验证,但 HTML5确实通过 pattern 属性支持这一点。
<input type= "text" name= "name" pattern= "[0-9]" title= "Title"/>
回答by nickko
Try this with the + after [0-9]:
用 [0-9] 后的 + 试试这个:
input type="text" pattern="[0-9]+" title="number only"
回答by charlie
Of course, you can't fully rely on the client-side(javascript) validation, but that's not a reason to avoid it completely. With or without it, you have to do the server-side validationanyway (since the client can disable javascript). And that's just what you're left with, due to your non-javascript solution constraint.
当然,您不能完全依赖客户端(javascript)验证,但这并不是完全避免它的理由。不管有没有它,您都必须进行服务器端验证(因为客户端可以禁用 javascript)。由于您的非 JavaScript 解决方案限制,这就是您所剩下的。
So, after a submit, if the field value doesn't pass the server-side validation, the client should end up on the very same page, with additional error messagespecifying the requested value format. You also should provide the value format information beforehands, e.g. as a tool-tip hint (title
attribute).
因此,在提交之后,如果字段值没有通过服务器端验证,客户端应该会在同一页面上结束,附加错误消息指定请求的值格式。您还应该事先提供值格式信息,例如作为工具提示提示(title
属性)。
There's most certainly no passive client-side validation mechanism existing in HTML 4 / XHTML.
HTML 4 / XHTML 中肯定不存在被动的客户端验证机制。
On the other hand, in HTML 5you have two options:
另一方面,在HTML 5 中你有两个选择:
input of type
number
:<input type="number" min="xxx" max="yyy" title="Format: 3 digits" />
– only validates the range – if user enters a non-number, an empty valueis submitted
– the field visual is enhanced with increment / decrement controls (browser dependent)the
pattern
attribute:<input type="text" pattern="[0-9]{3}" title="Format: 3 digits" /> <input type="text" pattern="\d{3}" title="Format: 3 digits" />
– this gives you a full contorl over the format (anything you can specify by regular expression)
– no visual difference / enhancement
输入类型
number
:<input type="number" min="xxx" max="yyy" title="Format: 3 digits" />
– 仅验证范围 – 如果用户输入非数字,则提交 一个空值
– 通过增量/减量控件增强字段视觉效果(取决于浏览器)该
pattern
属性:<input type="text" pattern="[0-9]{3}" title="Format: 3 digits" /> <input type="text" pattern="\d{3}" title="Format: 3 digits" />
– 这使您可以完全控制格式(您可以通过正则表达式指定的任何内容)
– 没有视觉差异/增强
But here you still rely on browser capabilities, so do a server-side validation in either case.
但是在这里您仍然依赖浏览器功能,因此在任何一种情况下都要进行服务器端验证。