javascript 在没有 HTML5 的情况下将输入字段限制为仅字母数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21100993/
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
Restrict input field to alphanumeric only without HTML5
提问by ryerye
To restrict an input field to alphanumeric only, I use the following on my site:
要将输入字段限制为仅字母数字，我在我的网站上使用以下内容：
<input
type="text"
name="url_code"
pattern="[a-zA-Z0-9_-]{4,10}"
class="widefat-main"
title="4 to 10 alphanumerical characters only"
/>
However for browsers that don't support HTML5, what is the best way to get the same restrictions?
但是，对于不支持 HTML5 的浏览器，获得相同限制的最佳方法是什么？
回答by zero298
You will need to use JavaScript to check the input then. In your <form>tag, the onsubmitattribute needs to call a function that will return a booleanvalue. True means that the form will go through, false, means that it won't.
您将需要使用 JavaScript 来检查输入。在您的<form>标签中，该onsubmit属性需要调用一个将返回boolean值的函数。True 表示表单会通过，false 表示不会通过。
Use a document selector to get the inputelement and then check its valueattribute. Make sure it is the right length. Then match it against a regular expression. (Learn about them here: Regular Expressions) If everything thing is fine, return true. Otherwise return false and either print in the console what was wrong or write it to a <div>. If you want a pop-up like you get with the HTML5 way, you'll have to do some other magic.
使用文档选择器获取input元素，然后检查其value属性。确保它是正确的长度。然后将其与正则表达式匹配。（在此处了解它们：正则表达式）如果一切正常，则返回 true。否则返回 false 并在控制台中打印错误或将其写入<div>. 如果你想要一个像 HTML5 那样的弹出窗口，你必须做一些其他的魔术。
Note the return validate();If you don't include that in your onsubmit=then it won't work, you must have the return.
请注意，return validate();如果您不将其包含在您的内容中，onsubmit=则它将不起作用，您必须拥有return。
<!DOCTYPE html>
<html>
<head>
<title>Validate</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.widefat-main{
}
</style>
<script>
function validate() {
var errorDiv = document.getElementById("errorDiv"),
regex = /^[a-z0-9]+$/,
str = document.getElementById("inputString").value;
if ((str.length > 4) && (str.length < 10) && regex.test(str)) {
errorDiv.innerHTML = "Fine string";
return true;
}
else {
errorDiv.innerHTML = "4 to 10 alphanumerical characters only";
return false;
}
}
</script>
</head>
<body>
<form action="" onsubmit="return validate();">
<input
id="inputString"
type="text"
name="url_code"
class="widefat-main"
title="4 to 10 alphanumerical characters only"
/>
<input type="submit" value="Submit"/>
</form>
<div id="errorDiv"></div>
</body>
</html>
