Question

我正在编写JavaScript来验证用Perl编写的表单。 JavaScript可以正常工作，因为在数据未被占用时会出现错误。但是，在警告错误消息后，仍然会提交表单。如果有错误，我不希望表单提交。我想我需要使用return false或true，但我不确定。任何帮助将不胜感激。

Perl代码：

#!/xampp/perl/bin/perl  -w

require "dbfunc.pl";
use CGI qw/:standard/;
use CGI::Carp qw(fatalsToBrowser);

print header;
print start_html("Customer Registration");
someJS();

print_html_head_section();

print "<h1>Your Details</h1>\n";
print "Please Fill In Your Details Below<p>"; 

print qq!<form method="GET" name="MyForm" onsubmit="return f1()"         action="RegisterCustomerInsert.pl"><br />!;

print qq! Title: <select name="Title">  

<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select><br>!;



print qq! Firstname: <input type="text", id="Fname" size=15><br>! ;
 print qq! Surname: &nbsp <input type="text", id="Sname" size=15><br>! ;
print qq! First Line Of Address: <input type="text", id="Fline" size=30>         <br>! ;
print qq! Second Line Of Address: <input type="text", id="Sline" size=30> <br>! ;
print qq! City / Town: <input type="text", id="Town" size=30> <br>! ;
print qq! Postcode: <input type="text", id="Pcode" size=30> <br>! ;
print qq! E-Mail: <input type="text", id="Email" size=15><br>! ;
print qq! Home Number: <input type="text", id="Hnumber" size=15><br>! ;
print qq! Mobile Number: <input type="text", id="Mnumber" size=15><br>! ;

sub someJS {
print "<h1>some javascript below</h1> \n";
print " <p>Click the button to display the date.</p> \n";
print  "<p id='demo'></p> \n ";

#print  "<button type='button' onclick='return f1()'>Try it</button> \n";
}

sub print_html_head_section {
print "<head>\n";
print "<script src='RegisterCustomerValidation.js'        type='text/javascript'></script>\n";
print "</head>\n";
}

print qq!<br /><input type="submit" value="Add"  style="width:50px"/>\n</form><br />!;

print end_html;

JavaScript代码

function checkFName() {

var Fname = document.forms["MyForm"]["Fname"].value;
if (Fname == null || Fname == "") {
    return true; 
}
}



function checkSName() {
var Sname = document.forms["MyForm"]["Sname"].value;
if (Sname == null || Sname == "") {
    return true;
}
}

function checkFLA() {
var FLA = document.forms["MyForm"]["Fline"].value;
if (FLA == null || FLA == "") {
    return true;
}
}

function checkSLA() {
var SLA = document.forms["MyForm"]["Sline"].value;
if (SLA == null || SLA == "") {
    return true;
}
}

function checkTown() {
var Town = document.forms["MyForm"]["Town"].value;
if (Town == null || Town == "") {
    return true;
}
}

function checkPcode() {
var Pcode = document.forms["MyForm"]["Pcode"].value;
if (Pcode == null || Pcode == "") {
    return true;
}
}

function checkEmail() {
var Email = document.forms["MyForm"]["Email"].value;
 atpos = Email.indexOf("@");
 dotpos = Email.lastIndexOf(".");
 if (atpos < 1 || ( dotpos - atpos < 2 ))   {
 return true;
 }    
}



function f1() {

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 (checkFLA(Fline)) {
    alert("First line of address must be filled out");
    document.MyForm.Fline.focus();
    document.getElementById("Fline").style.border = '2px solid red';

}

        if (checkSLA(Sline)) {
    alert("Second line of address must be filled out");
    document.MyForm.Sline.focus();
    document.getElementById("Sline").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("Postcode must be filled out");
    document.MyForm.Pcode.focus();
    document.getElementById("Pcode").style.border = '2px solid red';

}

    if (checkEmail(Email)) {
    alert("This is not a valid email");
    document.MyForm.Email.focus();
    document.getElementById("Email").style.border = '2px solid red';

}

}

Answer 1

如果数据是无效的，则您的函数f1()不会返回false。在函数顶部添加一个布尔值，如果数据无效则将布尔值更改为false，并在结尾处返回布尔值。如果布尔值为false，则不会发送表单。

例如：

function f1() {
    var bool = true;
    if (checkFName(Fname)) {
        alert("First name must be filled out");
        document.MyForm.Fname.focus();
        document.getElementById("Fname").style.border = '2px solid red';
        bool = false;
    }
    .
    .
    .
    return bool;
}

JavaScript表单验证，在数据无效时提交

1 个答案: