Question

希望你能提供帮助，我正在制作一个使用JavaScript验证的HTML表单。表单验证适用于Firstname，Surname和town。但是，出于某种原因，它不适用于第一行或第二行地址以及邮政编码，我无法说明原因。任何帮助，将不胜感激。以下是HTML和JavaScript。

HTML：

<!DOCTYPE html>
<html>
<head> 
<Title> In Class Test 5 </title>
<script src="RegisterCustomerValidation.js"></script>

<body> 
<h1> Working out the difference between today and your selected date </h1>

    <Form name="MyForm" >

<br> Please enter your first name:
<input type="text" id="Fname">  <br>         

Please enter your surname:
<input type="text" id="Sname">  <br> 

Please enter your first line of address 
<input type="text" id="FLINE"> <br>

Please enter your Second line of address
<input type="text" id="SLINE"> <br>

Please enter your City or Town
<input type="text" id="Town"> <br>

Please enter your postcode 
<input type="text" id="Pcode"> <br>

Please enter a email:
<input type="text" id="Email" size=15><br>  

Please enter your home number:  
<input type="text" id="Hnumber" size=15><br>

Please enter your mobile number     
<input type="text" id="Mnumber" size=15><br>

<button type="button" onclick="return f1()">Submit</button>
    </Form>  



</body>

</html>

我的JavaScript：

function checkFName() {

var Fname = document.forms["MyForm"]["Fname"].value;
if (Fname == null || Fname == "") {
    alert("Name must be filled out");
    document.MyForm.Fname.focus();
    document.getElementById("Fname").style.border = '2px solid red';
    return true;
}
}

function checkSName() {
var Sname = document.forms["MyForm"]["Sname"].value;
if (Sname == null || Sname == "") {
    alert("Surname must be filled out");
    document.MyForm.Sname.focus();
    document.getElementById("Sname").style.border = '2px solid red';
    return true;
}
}

function checkTown() {
var Town = document.forms["MyForm"]["Town"].value;
if (Town == null || Town == "") {
    alert("Town must be filled out");
    document.MyForm.Town.focus();
    document.getElementById("Town").style.border = '2px solid red';
    return true;
}
}

function Pcode() {
var Pcode = document.forms["MyForm"]["Pcode"].value;
if (Pcode == null || Pcode == "") {
    alert("Town must be filled out");
    document.MyForm.Pcode.focus();
    document.getElementById("Pcode").style.border = '2px solid red';
    return true;
}
}
function checkFLA() {
var FLA = document.forms["MyForm"]["FLINE"].value;
if (FLA == null || FLA == "") {
    alert("First line of address must be filled out");
    document.MyForm.FLINE.focus();
    document.getElementById("FLINE").style.border = '2px solid red';
    return true;
}
}

function checkSLA() {
var SLA = document.forms["MyForm"]["SLINE"].value;
if (SLA == null || SLA == "") {
    alert("Second line of address must be filled out");
    document.MyForm.SLINE.focus();
    document.getElementById("SLINE").style.border = '2px solid red';
    return true;
}
}

function f1() {

alert("hello world");
if (checkFName(Fname)) {
    alert("First name must be filled out");
    document.MyForm.Fname.focus();
    document.getElementById("Fname").style.border = '2px solid red';
}


if (checkSName(Sname)) {
    alert("Surname must be filled out");
    document.MyForm.Sname.focus();
    document.getElementById("Sname").style.border = '2px solid red';

}


if (checkTown(Town)) {
    alert("Town must be filled out");
    document.MyForm.Town.focus();
    document.getElementById("Town").style.border = '2px solid red';

}

if (checkPcode(Pcode)) {
    alert("Surname must be filled out");
    document.MyForm.Pcode.focus();
    document.getElementById("Pcode").style.border = '2px solid red';

}
if (checkFLA(FLA)) {
    alert("First line of address must be filled out");
    document.MyForm.FLINE.focus();
    document.getElementById("FLINE").style.border = '2px solid red';

}
if (checkSLA(SLA)) {
    alert("Second line of address must be filled out");
    document.MyForm.SLINE.focus();
    document.getElementById("SLINE").style.border = '2px solid red';

}


}

Answer 1

我找到了。你的程序在邮政编码上窒息。

您正在检查 - ＆gt; if（checkPcode（Pcode））

但是函数的正确名称是Pcode而不是checkPcode - ＆gt;函数Pcode（）{

编辑。是的，我刚刚修复了FLA。不要传递任何论据，即没有FLA（checkFLA（）） - 我认为它应该有用。

Answer 2

看起来你在区分大小写方面有很多错误。 JavaScript是区分大小写的语言，因此Fname和fname完全不同。

确定命名约定并坚持下去是一个好习惯。

camelCase是一个好主意~~虽然我只是为了方便而将所有内容放在小写~~。

AirBnB有一个style guide，这是一个了解编写代码的更简洁方法的好地方。

我也非常喜欢Douglas Crockford的 JavaScript：好的部分。

<强> HTML

<h1> Working out the difference between today and your selected date </h1>

<form name="myForm" id="myForm" action="">
    <br>Please enter your first name:
    <input type="text" id="fName" />
    <br>Please enter your surname:
    <input type="text" id="sName" />
    <br>Please enter your first line of address
    <input type="text" id="fLine" />
    <br>Please enter your Second line of address
    <input type="text" id="sLine" />
    <br>Please enter your City or Town
    <input type="text" id="town" />
    <br>Please enter your postcode
    <input type="text" id="pCode" />
    <br>Please enter a email:
    <input type="text" id="email" size="15" />
    <br>Please enter your home number:
    <input type="text" id="hNumber" size="15" />
    <br>Please enter your mobile number
    <input type="text" id="mNumber" size="15" />
    <br>
    <button type="button" id="submitButton">Submit</button>
</form>

<强>的JavaScript

var form1 = document.forms["myForm"];
var submitButton = document.getElementById("submitButton");

function validateForm() {
    checkTextField('fName', "Name must be filled out");
    checkTextField('sName', "Surname must be filled out");
    checkTextField('fLine', "First line of address");
    checkTextField('sLine', "Second line of address");
    checkTextField('town', "Town must be filled out");
    checkTextField('pCode', "Postal Code must be filled out");
    checkTextField('email', "Email must be filled out");
    checkTextField('hNumber', "Home number must be filled out");
    checkTextField('mNumber', "Mobile number must be filled out");
}

function checkTextField(fieldName, message) {
        field = form1[fieldName];
    if (field.value === null || field.value === "") {
        alert(message);
        field.focus();
        field.style.border = '2px solid red';
    }
}

See JSFiddle

修改更新了camelCase的代码和示例（这是一个好主意）。

Answer 3

你在javascript代码中犯了几个错误

调用checkPcode(Pcode)实际函数名称Pcode()
无需在FLA使用if (checkFLA(FLA))

if (checkFLA())

无需在SLA使用if (checkSLA(SLA)

if (checkSLA())

JavaScript表单验证不适用于所有HTML字段

3 个答案: