Javascript 用PHP进行JQuery表单验证

我在用JQuery验证注册表时遇到问题。 即使数据是正确的，它仍然不会进入regprocess.php

我认为在JavaScript检查有效标志的过程中会出现错误，但我没有足够的经验来了解它是什么

有人能提供帮助吗

PHP文档中的表单

<form name="register" method="post" action="regprocess.php">
   <fieldset>
      <legend>&nbsp;Registration Details&nbsp;</legend>
     <ol style="list-style: none; padding-left: 10px;">
        <br>
        <li>
           <label for="username"><h3>Username:</h3>(Maximum 15 characters)</label>
           <input class="username" type="text" title="Please enter a username less than 15 characters!" name="username" />
        </li>
        <br>
        <li>
           <label for="password"><h3>Password:</h3>(Maximum 20 characters)</label>
           <input class="password" type="password" name="password" title="Please enter a password less than 20 characters!"/>
        </li>
        <br>
        <li>
           <label for="password2"><h3>Confirm Password:</h3></label>
           <input class="password" type="password" name="password2" title="Please confirm your password!" />
        </li>
        <br>
     </ol>
   </fieldset>
   <fieldset>
      <legend>&nbsp;Name&nbsp;</legend>
     <ol style="list-style: none; padding-left: 10px;">
        <br>
        <li>
           <label for="fname"><h3>First Name:</h3>(Maximum 50 characters)</label>
           <input class="name" type="text" name="fname" title="There is a first name limit of 50 characters"/>
        </li>
        <br>
        <li> 
           <label for="lname"><h3>Surname:</h3>(Maximum 50 characters)</label>
           <input class="name "type="text" name="lname" title="There is a surname limit of 50 characters" />
        </li>
        <br>
     </ol>
   </fieldset>
   <br>
    <input type="submit" name="submit" value="Create your account!" /><br><br>
    Already a user? Log in <a class="link" href="register.php">HERE</a><br>
</form>

$(function() {
    $('input.username') //declares the input from the 'username' field
    .blur(function() { //blur dictates when the user leaves the field
        console.log('user has left the username field'); //sends information to the JS console
        var username =$(this).val(); //data variable is equal to the trigger
        console.log(username); //sends the data to the JS console

        if (username.length > 15) {
            console.log('invalid data'); //sends 'invalid data to the console if it is > 15
            $(this).addClass('errorBorder');
            $(this).parent().children('label').addClass('errorText');
            $(this).after('<p class="red">Please enter a valid username!</p>'); //outputs an error message below the form
            $(this).removeClass('valid');

        }else{
            console.log('valid data'); //sends 'valid' data to the console if it is < 15
            $(this).removeClass('errorBorder');
            $(this).parent().children('label').removeClass('errorText');
            $('p').remove(); //removes the error message if valid data is input
            $(this).addClass('valid');
        }
        });
    });

    // PW11: password form validation

    $(function() {
    $('input.password') //declares the input from the 'password' field
    .blur(function() { //blur dictates when the user leaves the field
        console.log('user has left the password field'); //sends information to the JS console
        var password =$(this).val(); //data variable is equal to the trigger
        console.log(password); //sends the data to the JS console

        if (password.length > 20) {
            console.log('invalid data'); //sends 'invalid data to the console if it is > 20
            $(this).addClass('errorBorder');
            $(this).parent().children('label').addClass('errorText');
            $(this).after('<p class="red">Please enter a valid password!</p>'); //outputs an error message below the form
            $(this).removeClass('valid');
        }else{
            console.log('valid data'); //sends 'valid' data to the console if it is < 20
            $(this).removeClass('errorBorder');
            $(this).parent().children('label').removeClass('errorText');
            $('p').remove(); //removes the error message if valid data is input
            $(this).addClass('valid');
        }
        });
    });

    // N1: name form validation

    $(function() {
    $('input.name') //declares the input from the 'name' class of field
    .blur(function() { //blur dictates when the user leaves the field
        console.log('user has left the name field'); //sends information to the JS console
        var fname =$(this).val(); //data variable is equal to the trigger
        console.log(fname); //sends the data to the JS console

        if (fname.length > 50) {
            console.log('invalid data'); //sends 'invalid data to the console if it is > 50
            $(this).addClass('errorBorder');
            $(this).parent().children('label').addClass('errorText');
            $(this).after('<p class="red">Please enter a valid name!</p>'); //outputs an error message below the form
            $(this).removeClass('valid');
        }else{
            console.log('valid data'); //sends 'valid' data to the console if it is < 50
            $(this).removeClass('errorBorder');
            $(this).parent().children('label').removeClass('errorText');
            $('p').remove(); //removes the error message if valid data is input
            $(this).addClass('valid');
        }
        });


    // SP1: Submit Prevention

    $('form[name="register"]').submit(function(event){
        alert('You must enter valid registration details!');
        var valid = true;
        $('input[name="submit"]').each(function(){
           var data = $(this).val();
           console.log(data);
           if ( !$(this).hasClass('valid')) valid = false;
        });
        console.log('valid:' + valid);
        if (valid)
        return true;
        return false;
    });

    });

注册详情



用户名：（最多15个字符）




密码：（最多20个字符）




确认密码：



名称



名字：（最多50个字符）




姓氏：（最多50个字符）








已经是用户了吗？登录

JavaScript

<form name="register" method="post" action="regprocess.php">
   <fieldset>
      <legend>&nbsp;Registration Details&nbsp;</legend>
     <ol style="list-style: none; padding-left: 10px;">
        <br>
        <li>
           <label for="username"><h3>Username:</h3>(Maximum 15 characters)</label>
           <input class="username" type="text" title="Please enter a username less than 15 characters!" name="username" />
        </li>
        <br>
        <li>
           <label for="password"><h3>Password:</h3>(Maximum 20 characters)</label>
           <input class="password" type="password" name="password" title="Please enter a password less than 20 characters!"/>
        </li>
        <br>
        <li>
           <label for="password2"><h3>Confirm Password:</h3></label>
           <input class="password" type="password" name="password2" title="Please confirm your password!" />
        </li>
        <br>
     </ol>
   </fieldset>
   <fieldset>
      <legend>&nbsp;Name&nbsp;</legend>
     <ol style="list-style: none; padding-left: 10px;">
        <br>
        <li>
           <label for="fname"><h3>First Name:</h3>(Maximum 50 characters)</label>
           <input class="name" type="text" name="fname" title="There is a first name limit of 50 characters"/>
        </li>
        <br>
        <li> 
           <label for="lname"><h3>Surname:</h3>(Maximum 50 characters)</label>
           <input class="name "type="text" name="lname" title="There is a surname limit of 50 characters" />
        </li>
        <br>
     </ol>
   </fieldset>
   <br>
    <input type="submit" name="submit" value="Create your account!" /><br><br>
    Already a user? Log in <a class="link" href="register.php">HERE</a><br>
</form>

$(function() {
    $('input.username') //declares the input from the 'username' field
    .blur(function() { //blur dictates when the user leaves the field
        console.log('user has left the username field'); //sends information to the JS console
        var username =$(this).val(); //data variable is equal to the trigger
        console.log(username); //sends the data to the JS console

        if (username.length > 15) {
            console.log('invalid data'); //sends 'invalid data to the console if it is > 15
            $(this).addClass('errorBorder');
            $(this).parent().children('label').addClass('errorText');
            $(this).after('<p class="red">Please enter a valid username!</p>'); //outputs an error message below the form
            $(this).removeClass('valid');

        }else{
            console.log('valid data'); //sends 'valid' data to the console if it is < 15
            $(this).removeClass('errorBorder');
            $(this).parent().children('label').removeClass('errorText');
            $('p').remove(); //removes the error message if valid data is input
            $(this).addClass('valid');
        }
        });
    });

    // PW11: password form validation

    $(function() {
    $('input.password') //declares the input from the 'password' field
    .blur(function() { //blur dictates when the user leaves the field
        console.log('user has left the password field'); //sends information to the JS console
        var password =$(this).val(); //data variable is equal to the trigger
        console.log(password); //sends the data to the JS console

        if (password.length > 20) {
            console.log('invalid data'); //sends 'invalid data to the console if it is > 20
            $(this).addClass('errorBorder');
            $(this).parent().children('label').addClass('errorText');
            $(this).after('<p class="red">Please enter a valid password!</p>'); //outputs an error message below the form
            $(this).removeClass('valid');
        }else{
            console.log('valid data'); //sends 'valid' data to the console if it is < 20
            $(this).removeClass('errorBorder');
            $(this).parent().children('label').removeClass('errorText');
            $('p').remove(); //removes the error message if valid data is input
            $(this).addClass('valid');
        }
        });
    });

    // N1: name form validation

    $(function() {
    $('input.name') //declares the input from the 'name' class of field
    .blur(function() { //blur dictates when the user leaves the field
        console.log('user has left the name field'); //sends information to the JS console
        var fname =$(this).val(); //data variable is equal to the trigger
        console.log(fname); //sends the data to the JS console

        if (fname.length > 50) {
            console.log('invalid data'); //sends 'invalid data to the console if it is > 50
            $(this).addClass('errorBorder');
            $(this).parent().children('label').addClass('errorText');
            $(this).after('<p class="red">Please enter a valid name!</p>'); //outputs an error message below the form
            $(this).removeClass('valid');
        }else{
            console.log('valid data'); //sends 'valid' data to the console if it is < 50
            $(this).removeClass('errorBorder');
            $(this).parent().children('label').removeClass('errorText');
            $('p').remove(); //removes the error message if valid data is input
            $(this).addClass('valid');
        }
        });


    // SP1: Submit Prevention

    $('form[name="register"]').submit(function(event){
        alert('You must enter valid registration details!');
        var valid = true;
        $('input[name="submit"]').each(function(){
           var data = $(this).val();
           console.log(data);
           if ( !$(this).hasClass('valid')) valid = false;
        });
        console.log('valid:' + valid);
        if (valid)
        return true;
        return false;
    });

    });

$（函数（）{
$（'input.username'）//声明来自'username'字段的输入
.blur（函数（）{//blur指示用户何时离开该字段
log（'user已离开username字段'）；//将信息发送到JS控制台
var username=$（this）.val（）；//数据变量等于触发器
log（用户名）；//将数据发送到JS控制台
如果（username.length>15）{
console.log（'invalid data'）；//如果大于15，则向控制台发送'invalid data'
$（this.addClass（'errorBorder'）；
$（this）.parent（）.children（'label'）.addClass（'errorText'）；
$（此）.after（“
请输入有效的用户名！
”）；//在表单下方输出错误消息
$（this.removeClass（'valid'）；
}否则{
console.log（'valid data'）；//如果<15，则向控制台发送'valid'数据
$（this.removeClass（'errorBorder'）；
$（this）.parent（）.children（'label'）.removeClass（'errorText'）；
$（'p'）.remove（）；//如果输入了有效数据，则删除错误消息
$（this.addClass（'valid'）；
}
});
});
//PW11：密码表单验证
$（函数（）{
$（'input.password'）//声明来自“password”字段的输入
.blur（函数（）{//blur指示用户何时离开该字段
log（'user已离开密码字段'）；//将信息发送到JS控制台
var password=$（this）.val（）；//数据变量等于触发器
console.log（password）；//将数据发送到JS控制台
如果（password.length>20）{
console.log（'invalid data'）；//如果大于20，则向控制台发送'invalid data'
$（this.addClass（'errorBorder'）；
$（this）.parent（）.children（'label'）.addClass（'errorText'）；
$（此）.after（“
请输入有效密码！
”）；//在表单下方输出错误消息
$（this.removeClass（'valid'）；
}否则{
console.log（'valid data'）；//如果<20，则向控制台发送'valid'数据
$（this.removeClass（'errorBorder'）；
$（this）.parent（）.children（'label'）.removeClass（'errorText'）；
$（'p'）.remove（）；//如果输入了有效数据，则删除错误消息
$（this.addClass（'valid'）；
}
});
});
//N1：名称表单验证
$（函数（）{
$（'input.name'）//声明字段的'name'类中的输入
.blur（函数（）{//blur指示用户何时离开该字段
log（'user已离开name字段'）；//将信息发送到JS控制台
var fname=$（this）.val（）；//数据变量等于触发器
console.log（fname）；//将数据发送到JS控制台
如果（fname.length>50）{
console.log（'invalid data'）；//如果大于50，则向控制台发送“无效数据”
$（this.addClass（'errorBorder'）；
$（this）.parent（）.children（'label'）.addClass（'errorText'）；
$（this）.after（“
请输入有效名称！
”）；//在表单下方输出错误消息
$（this.removeClass（'valid'）；
}否则{
console.log（'valid data'）；//如果<50，则向控制台发送'valid'数据
$（this.removeClass（'errorBorder'）；
$（this）.parent（）.children（'label'）.removeClass（'errorText'）；
$（'p'）.remove（）；//如果输入了有效数据，则删除错误消息
$（this.addClass（'valid'）；
}
});
//提交预防措施
$（'form[name=“register”]”）。提交（函数（事件）{
警报（'您必须输入有效的注册详细信息！'）；
var valid=true；
$（'input[name=“submit”]”）。每个（函数（）{
var data=$（this.val（）；
控制台日志（数据）；
if（！$（this）.hasClass（'valid'））valid=false；
});
console.log（'valid:'+valid）；
如果（有效）
返回true；
返回false；
});
});

其实很简单。您正在检查错误的输入（实际上只检查提交按钮）。你必须改变

$('input[name="submit"]').each(function(){

到

您总是警告“您必须输入有效…”-这只是为了调试还是疏忽？您有

if（）

语句，没有大括号

{}

。解决这些问题，看看你是否还有同样的问题。