如何使用 Javascript 在 HTML 文本框上设置最小和最大字符长度答案

【问题标题】：How to set a min and max character length on a HTML textbox using Javascript如何使用 Javascript 在 HTML 文本框上设置最小和最大字符长度
【发布时间】：2013-01-21 14:43:18
【问题描述】：

我只有 GCSE 级别，我的代码中需要一个文本框，只有 4 个字符。我已将其设置为最多 4 个，但我也需要它至少有 4 个。我也让它只接受数字。我在学校没有使用 HTML 5。

这是我的全部代码：

 <head>
    <title>Exam entry</title>
    <script language="javascript" type="text/javascript">
    function validateForm() {
    var result = true;
    var msg="";




if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject. \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.ExamNumber.value=="") {
msg+="You must enter your exam number. \n";
document.ExamEntry.ExamNumber.focus();
document.getElementById('ExamNumber').style.color="red";
result = false;
}

if(document.ExamEntry.ExamNoLen.value.length <4) { 
msg+="Your eaxm nuber must be 4 digits long.  \n";
document.ExamEntry.ExamNumber.focus();
document.getElementById('ExamNumber').style.color="red";
result = false;
}

checkInput(elem){
    if(elem.value.length != 4){
        alert("This value needs to be 4 characters long!");
        elem.value = ""; // Reset the textbox
    }
    else{
        alert("This value is 4 characters long.");
    }
}

if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
  <td id="subject">Subject</td>
  <td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="ExamNumber">Exam Number </td>
<td>
  <input name="ExamNumber"  type="text"  
  onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )" 
                    maxlength="4" onblur="checkInput(this)"  />
    </td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onClick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>

【问题讨论】：

我也在用dreamweaver编辑代码。

标签： javascript dreamweaver

【解决方案1】：

好吧，您不能有最小长度，因为您的用户需要输入 1,2 和 3 个字符才能达到 4。（除非您应用某种更高级的输入掩码）。但是你可以检查它模糊时是4个字符长..

<input name="ExamNumber" type="text" onblur="checkInput(this)" onkeydown="return ( event.ctrlKey || event.altKey || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) || (95<event.keyCode && event.keyCode<106) || (event.keyCode==8) || (event.keyCode==9) || (event.keyCode>34 && event.keyCode<40) || (event.keyCode==46) )" maxlength="4" />

然后是一个简单的 JavaScript 函数..

function checkInput(elem){
    if(elem.value.length != 4){
        alert("This value needs to be 4 characters long!");
        elem.value = ""; // Reset the textbox
    }
    else{
        alert("This value is 4 characters long.");
    }
}

【讨论】：

这是合法（而且非常简单）的代码，如果它不起作用，那么它更多的是一个基本问题（也许你的文本框找不到函数）
@user1990084 你已经把我给你的函数放在你的validateForm() 函数中了。把它从那里拿出来。
另外——记得在创建函数时添加关键字function。
@user1990084 你过得怎么样？
我按照你说的做了，它也做了我想做的事。只是将警报消息更改为我需要它说的内容