Question

你好我有一个html表单，我想通过javascript验证它的输入字段，如果一切都是真的，那么调用一个php函数，将表单输入字段添加到数据库。在表单上我在表单中添加了onsubmit标记，但是php函数被调用。这是我到目前为止所做的：

signup.php

    <body>
        <form method="post" action="student_signup.php" onsubmit="return validateForm()">
                        <table>
                            <tr>
                                <td> Όνομα:</td> 
                                <td><input type="text" name="name" id="name" onblur="validateName('name')"> </td>
                                <td><span id="nameError" style="display: none;"></span> <td>
                            </tr>
                            <tr>
                                <td> Επώνυμο:</td> 
                                <td><input type="text" name="surname" id="surname" onblur="validateName('surname')"> </td>
                                <td><span id="surnameError" style="display: none;"></span> <td>
                            </tr>
                            <tr>
                                <td> Username:</td> 
                                <td><input type="text" name="username" id="username" onblur="validateName('username')"> </td>
                                <td><span id="usernameError" style="display: none;"></span> <td>
                            </tr>
                            <tr>
                                <td> Κωδικός:</td> 
                                <td><input type="password" name="password" id="password" onblur="validatePassword('password')" > </td>
                                <td><span id="passwordError" style="display: none;"></span> <td>
                            </tr>
                            <tr>
                                <td> Επαλήθευση κωδικού:</td> 
                                <td><input type="password" name="passwordConfirm" id="passwordConfirm" onblur="validateConfirmPassword('password','passwordConfirm')"> </td>
                                <td><span id="passwordConfirmError" style="display: none;"></span> <td>
                            </tr>

        </form>
        </table>
                 .
                 .
                 .
                 .
    </body>

<php?

if($_SERVER['REQUEST_METHOD']=='POST')
{
      echo "adding to database";
    foo();

} 

php>

validate.js

function validateForm() {

    var error = 0;

    if (!validateName('name')) {
        document.getElementById('nameError').style.display = "block";
        error++;
    }


    if (!validateEmail('password')) {
        document.getElementById('emailError').style.display = "block";
        error++;
    }
alert(error);

    if (error > 0) {
        return false;
    }
}

目前每次if语句上的消息都打印，尽管alertbox打印“2”。有没有什么可以检查javascript函数的返回并相应调用php函数？或者我必须在服务器端进行验证？每当我用户输入某个功能时，触发一个功能，并在输入字段旁边打印包含错误的消息。如果我在服务器端进行验证，这将是无用的。在客户端和服务器端进行验证是一种好方法吗？提前thx！

Answer 1

你可以试试这个： -

<body>
    <script>
        var error = 0;
        function validateForm() {
            alert(error);
            if (error > 0) {
                return false;
            } else{
                return true;
            }
        }
        function validateName(value,fieldName){
            if(!value){
                error++;
                if(fieldName === 'name'){
                    document.getElementById('nameError').style.display = "block";
                } else if(fieldName === 'surname'){
                    document.getElementById('surnameError').style.display = "block"; 
                } else if(fieldName === 'username'){
                    document.getElementById('usernameError').style.display = "block"; 
                }else if(fieldName === 'password'){
                    document.getElementById('passwordError').style.display = "block"; 
                }
            } else{
                if(error>0){
                    error--;
                }
                  if(fieldName === 'name'){
                    document.getElementById('nameError').style.display = "none";
                } else if(fieldName === 'surname'){
                    document.getElementById('surnameError').style.display = "none"; 
                } else if(fieldName === 'username'){
                    document.getElementById('usernameError').style.display = "none"; 
                }else if(fieldName === 'password'){
                    document.getElementById('passwordError').style.display = "none"; 
                }
            }
        }
        function validateConfirmPassword(value){
            if(value != document.getElementById('password').value){
                error ++;
                document.getElementById('passwordConfirmError').style.display = "block"; 
            }else{
                if(error>0){
                    error--;
                }
                 document.getElementById('passwordConfirmError').style.display = "none"; 
            }
        }
    </script>
    <form method="post" action="" onsubmit="return validateForm()">
        <table>
            <tr>
                <td> Όνομα:</td> 
                <td><input type="text" name="name" id="name" onblur="validateName(this.value,'name')"> </td>
                <td><span id="nameError" style="display: none;">Name</span> <td>
            </tr>
            <tr>
                <td> Επώνυμο:</td> 
                <td><input type="text" name="surname" id="surname" onblur="validateName(this.value,'surname')"> </td>
                <td><span id="surnameError" style="display: none;">Surname</span> <td>
            </tr>
            <tr>
                <td> Username:</td> 
                <td><input type="text" name="username" id="username" onblur="validateName(this.value,'username')"> </td>
                <td><span id="usernameError" style="display: none;">username</span> <td>
            </tr>
            <tr>
                <td> Κωδικός:</td> 
                <td><input type="password" name="password" id="password" onblur="validateName(this.value,'password')" > </td>
                <td><span id="passwordError" style="display: none;">Password</span> <td>
            </tr>
            <tr>
                <td> Επαλήθευση κωδικού:</td> 
                <td><input type="password" name="passwordConfirm" id="passwordConfirm" onblur="validateConfirmPassword(this.value)"> </td>
                <td><span id="passwordConfirmError" style="display: none;">confirm password</span> <td>
            </tr>
        </table>
        <input type="submit"></input>
    </form>
</body>

Answer 2

这个问题似乎已从代码相关问题转移到良好实践问题上。

如前所述，客户端验证不可信。用户可以轻松操纵JS以绕过验证并发送错误信息。这就是服务器端验证很重要的原因。您可以检查用户输入的错误/恶意脚本，然后清除/拒绝数据。 绝不相信用户信息是正确/安全的

客户端验证有其地位。应该用它来改善用户体验。在提交表单之前使用它来检查表单是否已完整填写，如果表单没有突出显示缺少的字段并显示消息。客户端/ JS应仅用于增强用户体验，而不是依赖它。

javascript验证后调用php函数

2 个答案: