Question

所以我写了一个Javascript外部文件，我将在下面添加。它是在HTML站点/文件中验证表单中的输入。我仍然有更多的功能要添加，但在我使其正常工作之前不会担心它们。 Javascript代码是：

// JavaScript source code

function fourDigit(ID)
{
    "use strict";
    var pattern = /^[1-9]\d{0,3}$/g;
    var result = pattern.test(document.getElementById(ID).value);

    if (result == false)
    {
        alert("Please insert a valid numeric value between 1-9999");
        return false;
    }
    else
    {
        return true;
    }
}

function runner()
{
    "use strict";
    fourDigit('RunnerID');
}

function event()
{
    "use strict";
    fourDigit('EventID');
}

function validate()
{
    "use strict";
    var result = runner() && event();

    if (result == true)
    {
        alert("all good");
        return true;
    }
    else
    {
        alert("doesn't work");
        return false;
    }
}

当我在HTML文件上测试它时（我在表单的提交按钮上调用validate()函数），即使我插入，它总是给我alert("Please insert a valid numeric value between 1-9999");和alert("doesn't work");有效数字到RunnerID和EventID表单字段中。我无法弄清楚为什么这个问题。可能很简单，但最近才开始学习Javascript。

我调用的HTML文件是：

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/>
<title>Submit a runner time</title>
<script language="javascript" src="validate.js"></script>
</head>
<body>
<hr/>
<h1>Submit a runner time</h1>
<hr/>
Note: all fields marked '*' are mandatory.
<p/>
<form onSubmit="return validate()"> 
<table>
<tr><td>Runner ID*</td>
<td><input type="text" id="RunnerID" name="RunnerID" size="4" maxlength="4"/></td>
</tr>
<tr><td>Event ID*</td>
<td><input type="text" id="EventID" name="EventID" size="4" maxlength="4"/></td>
</tr>
<tr><td>Date (YYYY-MM-DD)*</td>
<td><input type="text" name="Date" size="10" maxlength="10"/></td>
</tr>
<tr><td>Finish time (HH:MM:SS)*</td>
<td><input type="text" name="FinishTime" size="8" maxlength="8"/></td>
</tr>
<tr><td>Position</td>
<td><input type="text" name="Position" size="5" maxlength="5"/></td>
</tr>
<tr><td>Category ID</td>
<td><input type="text" name="CategoryID" size="3" maxlength="2"/></td>
</tr>
<tr><td>Age grade</td>
<td><input type="text" name="AgeGrade" size="5" maxlength="5"/></td>
</tr>
<tr><td>Personal best</td>
<td><input type="text" name="PB" size="1" maxlength="2"/></td>
</tr>
</table>
<input type="submit" name="submitrunnertime" value="submit"/>
<hr/>
</form>
</body>
</html>

由于

Answer 1

你的正则表达式错了！

[1-9999]表示1到9范围内的1位数字

您需要^[1-9]\d{0,3}$

意思是：

^：字符串的开头

[1-9]：1-9

中的1位数字

\d：一个数字

{0,3}：0到3位数

$：字符串结尾

这将不允许0111或以0

开头的任何数字

Answer 2

Pure JS。

// JavaScript source code

function fourDigit(ID)
{
    var pattern = /^([1-9][0-9]{0,3})$/;;
    var result = pattern.test(document.getElementsByName(ID)[0].value);

    if (result == false)
    {
        alert("Please insert a valid numeric value between 1-9999");
        return false;
    }
    else
    {
        return true;
    }
}

function runner()
{
    return fourDigit('RunnerID');
}

function event()
{
    return fourDigit('EventID');
}

function validate()
{
    var result = runner() && event();

    if (result == true)
    {
        alert("all good");
        return true;
    }
    else
    {
        alert("doesn't work");
        return false;
    }
}

外部Javascript表单验证不起作用，不知道为什么？

2 个答案: