Question

嘿伙计们，我现在还有3-4个星期的PHP和javascript新手，而且我的javascript和php出现了一个问题，我已经使用了。

它应该做的很简单就是把错误放进去，警告会告诉你输入错误的位置。

好吧所以发生的事情是我的javascript实际运行（我甚至用颜色编码来告诉你它的错误）并且应该出现一个警告并告诉你一个错误的列表，但警报不会出现它基本上告诉你它的错误（我可以告诉因为输入框改变颜色）并且没有错误输出。

我用我的php思考它的东西，因为我的javascript非常正确（我希望）不管怎么说都会发布它们。

PHP：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Register</title>
    <link rel="stylesheet" type="text/css" href="home.css" />
    <script type="text/javascript" src="rego1.js"></script>
</head>
<body>
<h1>Registration</h1>
<div id="navigation">
    <ul>
        <li><a href="home.php">Home</a></li>
        <li>User Registration</li>
        <li><a href="userlogin.php">User Login</a></li>
        <li><a href="adminlogin.php">Administrator Login</a></li>
        <li><a href="termsCond.php">Terms & Conditions</a></li>
    </ul>
</div>  
    <h2>Please Fill out the form</h2>
    <?php
        $displayForm = true;
        if(isset($_POST['Submit'])){
            $displayForm = false;
        }
        if($displayForm){
        ?>
        <form action="rego.php" method="post" name="validForm" onsubmit="return validationForm(this)">
            <p>First name: <input type="text" name="FirstName" />*</p>
            <p>Middle Name: <input type="text" name="MiddleName" /></p>
            <p>Family name: <input type="text" name="FamilyName" />*</p>
            <p>Chosen Username: <input type="text" name="UserName" />*</p>
            <p>Address: <input type="text" name="Address" />*</p>
            <p>State: <input type="text" name="State" />*</p>
            <p>Postcode: <input type="text" name="PostCode" />*</p>
            <p>Telephone: <input type="text" name="Phone" />*</p>
            <p>Email: <input type="text" name="Email" />*</p>
            <p>Password: <input type="text" name="Password" />*</p>
            <p>Confirm password: <input type="text" name="ConfirmPassword" />*</p>

            <p><input name="Submit" value="Send" type="submit" ></p>
        </form>

        <?php
        }
    ?>


</body>
</html>

使用Javascript：

function validationForm(regoForm) {
var formInput = "";

  formInput += validateFirstName(regoForm.FirstName);
  formInput += validateFamilyName(regoForm.FamilyName);
  formInput += validateUserName(regoForm.UserName);
  formInput += validateAddress(regoForm.Address);
  formInput += validateState(regoForm.State);
  formInput += validatePostCode(regoForm.PostCode);
  formInput += validatePhone(regoForm.Phone);
  formInput += validateEmail(regoForm.Email);
  formInput += validatePassword(regoForm.Password);
  formInput += validatePasswordConfirm(regoForm.PasswordConfirm);

  if (formInput != "") {
    window.alert("Some fields need to be Corrected \n" +  formInput);
    return false;
  }

  return true;
}

function validateFirstName(input) {
    var inputError = "";

    if (input.value.length == 0) {
        input.style.background = 'Red'; 
        inputError = "You have not given a First Name"
    } else {
        input.style.background = 'White';
    }
    return inputError;   
}

function validateFamilyName(input) {
    var inputError = "";

    if (input.value.length == 0) {
        input.style.background = 'Red'; 
        inputError = "You have not given a First Name"
    } else {
        input.style.background = 'White';
    }
    return inputError;   
}

function validateUserName(input) {
    var inputError = "";
    var allowChars = /\W/; // this will allow only letters, numbers, underscores

    if (input.value == "") {
        input.style.background = 'Red'; 
        inputError = "Username has not been entered\n";
    } else if ((input.value.length < 5) || (input.value.length > 15)) {
        input.style.background = 'Red'; 
        inputError = "Username is the wrong length\n";
    } else if (allowChars.test(input.value)) {
        input.style.background = 'Red'; 
        inputError = "Username has the wrong characters\n";
    } else {
       input.style.background = 'White';
    } 
    return inputError;
}

function validateAddress(input) {
    var inputError = "";

    if (input.value.length == 0) {
        input.style.background = 'Red'; 
        inputError = "You have not given a Address\n"
    } else {
        input.style.background = 'White';
    }
    return inputError;   
}

function validateState(input) {
    var inputError = "";

    if (input.value.length == 0) {
        input.style.background = 'Red'; 
        inputError = "You have not given a State\n"
    } else {
        input.style.background = 'White';
    }
    return inputError;   
}

function validatePostCode(input) {
    var inputError = "";

    if (input.value == "") {
        input.style.background = 'Red'; 
        inputError = "Postcode has not been entered\n";
    } else if ((input.value.length < 4) || (input.value.length > 4)) {
        input.style.background = 'Red'; 
        inputError = "Postcode must have 4 numbers\n";
    } else {
       input.style.background = 'White';
    } 
    return inputError;
}

function validatePhone(input) {
    var inputError = "";
    var phone = input.value.replace(/[\(\)\.\-\ ]/g, '');     

   if (input.value == "") {
        inputError = "Phone number not entered\n";
        input.style.background = 'Red';
    } else if (isNaN(parseInt(phone))) {
        inputError = "Phone number does not have correct characters\n";
        input.style.background = 'Red';
    } else if (!(phone.length == 10)) {
        inputError = "Phone number is the wrong length";
        input.style.background = 'Red';
    } 
    return inputError;
}

function trim(x)
{
  return x.replace(/^\s+|\s+$/, '');
} 

function validateEmail(input) {
    var inputError="";
    var trimInput = trim(input.value);                        // value of field with whitespace trimmed off
    var email = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var allowChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    if (input.value == "") {
        input.style.background = 'Red';
        inputError = "Email address not entered\n";
    } else if (!emailFilter.test(trimInput)) {              //test email for illegal characters
        input.style.background = 'Red';
        inputError = "Email is not valid\n";
    } else if (input.value.match(allowChars)) {
        input.style.background = 'Red';
        inputError = "Email does not have correct characters\n";
    } else {
        input.style.background = 'White';
    }
    return inputError;
}

function validatePassword(input) {
    var inputError = "";
    var allowChars = /[\W_]/; // this will only allow numbers and letters

    if (input.value == "") {
        input.style.background = 'Red';
       inputError = "You didn't enter a password.\n";
    } else if ((input.value.length < 5) || (input.value.length > 15)) {
        inputError = "Password is at at the wrong length\n";
        input.style.background = 'Red';
    } else if (illegalChars.test(input.value)) {
        inputError = "Password has wrong characters\n";
        input.style.background = 'Red';
    } else if (!((input.value.search(/(a-z)+/)) && (input.value.search(/(0-9)+/)))) {
        inputError = "The password must have a proper value.\n";
        input.style.background = 'Red';
    } else {
        input.style.background = 'White';
    }
   return inputError;
}

function validatePasswordConfirm(){
    var inputError ="";
    var password1 = document.getElementById('Password');
    var password2 = document.getElementById('ConfirmPassword');

    if(password1 == password2.value){
        input.style.background = 'White';   
    }
    else{
        inputError = "The confirmation password is not the same\n";
        input.style.background = 'Red';
    }
    return inputError;
}

Answer 1

它几乎可以工作。 validatePasswordConfirm();包含两个错误。让我们仔细看看：

首先，将input作为参数传递，就像在其他函数中一样：

function validatePasswordConfirm(input) { }

然后，将ID添加到密码字段中，如Harikrishnan告诉您：

<p>Password: <input type="text" name="Password" id="Password" />*</p>
<p>Confirm password: <input type="text" name="ConfirmPassword" id="ConfirmPassword" />*</p>

这是因为您拨打了getElementById并且在您的文档中没有此类ID。由于JS错误，您的表单将被提交。

修复此问题后，您的代码运行正常。

Answer 2

将id属性添加到密码字段。

        <p>Password: <input type="text" name="Password" id="Password" />*</p>
        <p>Confirm password: <input type="text" name="ConfirmPassword" id="ConfirmPassword" />*</p>

Javascript和PHP警报框问题

2 个答案: