为了将输入字段限制为仅字母数字，我在我的网站上使用了以下内容:
<input
type="text"
name="url_code"
pattern="[a-zA-Z0-9_-]{4,10}"
class="widefat-main"
title="4 to 10 alphanumerical characters only"
/>
但是对于不支持 HTML5 的浏览器，获得相同限制的最佳方法是什么？
最佳答案
然后您将需要使用 JavaScript 来检查输入。在你的<form>标记，onsubmit属性需要调用一个将返回 boolean 的函数值(value)。 True 表示表单将通过，false 表示不会。
使用文档选择器获取 input元素，然后检查其 value属性。确保长度合适。然后将其与正则表达式进行匹配。 (在这里了解它们:Regular Expressions)如果一切正常，返回 true。否则返回 false 并在控制台中打印错误或将其写入 <div>。 .如果您想要像 HTML5 方式那样的弹出窗口，则必须使用其他一些魔法。
注意 return validate(); 如果您不将其包含在您的 onsubmit= 中那么它将不起作用，您必须有返回。
<!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>
关于javascript - 在没有 HTML5 的情况下将输入字段限制为仅字母数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21100993/