Question

我正在为学校做一个项目。我正在使用的代码直接来自我们的实验手册，但我的导师周末不在城里。这个概念是使用JavaScript操作数据。我遇到验证部分的问题，特别是空字段编号验证。如果表单中的“最大参加者”或“电话号码”字段留空，则应显示错误。它适用于字母字符，但不适用于空字段。我假设因为这些字段使用HTML5数字类型，for循环正在考虑空值0.我是否在正确的轨道上？

<!DOCTYPE HTML>

<html>
<head>
<title>Event Scheduler</title>
<script language="JavaScript" type="text/javascript">
<!--

function ScheduledEvent(evtDate, evtTitle, maxattendees, evtCoordinator, 
                        phonenum, email, infourl) {

    this.evtDate = evtDate;
    this.evtTitle = evtTitle;
    this.maxattendees = maxattendees;
    this.evtCoordinator = evtCoordinator;
    this.phonenum = phonenum;
    this.email = email;
    this.infourl = infourl;
    this.PrintEvent = PrintEvent;
}

function PrintEvent(){
    document.write("<p>You have scheduled an event named " + 
                   this.evtTitle);
    document.write(" that will occur on " + this.evtDate + 
                   " and allow up to " + this.maxattendees + " attendees. ");
    document.write("The event is coordinated by " + 
                   this.evtCoordinator + " who can be reached at " + this.phonenum);
    document.write(" or by email at " + this.email + ".  ");
    document.write("More information about the event is available at" + 
                   " <a href='" + this.infourl + "'> " + this.infourl + "</a></p>");
}

function IsNumeric(sNumber){
    var numberChars = "0123456789.";
    var IsNumber = true;
    var currentChar;

    //loop through the characters to ensure that each is a character
    //that would be included in a positive number
    for (i = 0; i < sNumber.length && IsNumber == true; i++)
    {
        currentChar = sNumber.charAt(i);
        if (numberChars.indexOf(currentChar) == -1)
        {
            IsNumber = false;
        }
    }
    return IsNumber;
} 

function Validate(){
    with (document.evtForm) {

        evt = new ScheduledEvent(evtDate.value, evtTitle.value,
                                 maxattendees.value, evtCoordinator.value, phonenum.value,
                                 email.value, infourl.value);
    }

    with (evt)
    {
        if(evtDate.length<1)
        {
            alert("You must enter a date.");
            return false;
        }
        if(evtCoordinator.length<5)
        {
            alert("The coordinator name must be at least five characters long.");
            return false;
        }
        if(evtTitle.length<1)
        {
            alert("The title mut be at least one character long.");
            return false;
        }   
        if(!IsNumeric(maxattendees))
        {
            alert("The maximum number of attendees must be a number.");
            return false;
        }
        if(!IsNumeric(phonenum))
        {
            alert("The phone number must be a number.");
            return false;
        }
        evt.PrintEvent();
    }
    return true;
}

//-->
</script>
</head>
<body>
<form name= "evtForm" method="post" onsubmit="Validate()">
<table>
<tr>
<td>
Event Date: </td><td><input type=date id="evtDate" /></td>
</tr>
<tr><td>Title:</td><td><input id="evtTitle" /></td></tr>
<tr><td>Maximum attendees:</td><td><input type=number id="maxattendees" />
</td></tr>
<tr><td>Event Coordinator: </td><td><input id="evtCoordinator" /></td></tr>
<tr><td>Phone number (numbers only): </td><td><input type=tel id="phonenum" />
</td></tr>
<tr><td>Email: </td><td><input type=email id="email" /></td></tr>
<tr><td>More info: </td><td><input type=url id="infourl" /></td></tr>
</table>
<input type=submit value="Submit" />

</form>

</body>
</html>

Answer 1

如果值字符串的长度为0，则循环中的测试不会被评估，函数将返回IsNumber - true的初始值。（当<input>为空时，该值为空字符串（""），而不是null。）

在该功能的顶部添加

if (!sNumber.length) return false;

如果长度为零，那么该函数将返回false。

如果你觉得自己喜欢幻想，可以用正则表达式进行整个测试：

function IsNumeric(sNumber) {
  return /^\d+$/.test(sNumber);
}

（就像你现有的循环一样，不允许小数部分。）

javascript验证号码未检测到空表单字段

1 个答案: