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

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

纯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 个解决方案

解决方案1
1 2017-01-10 09:48:28

解决方案2
1 2017-01-10 09:53:20

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

问题描述

2 个解决方案

解决方案1 1 2017-01-10 09:48:28

解决方案2 1 2017-01-10 09:53:20

解决方案1
1 2017-01-10 09:48:28

解决方案2
1 2017-01-10 09:53:20