Question

所以我正在为我的网站创建一个注册页面并且验证不会丢弃任何“丢失数据”跨度，我一直在关注一个教程，但不知何故我的工作不起作用。我的代码：

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="theme3.css">
<title>Register</title>
<style>
.error{
    color: red;
}
</style>

</head>
<body>
        <div id="container">
            <h1>Registration Form</h1>
            <div id="regForm"
                <form action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
                    <div><label for="fname">First Name</label><input type="text" name="fname" id="fname"></div>
                    <div><label for="lname">Last Name</label><input type="text" name="lname" id="lname"></div>
                    <div><label for="username">Username</label><input type="text" name="username" id="username"></div>
                    <div><label for="password">Password</label><input type="password" name="password" id="password"></div>
                    <div><label for="email">Email Address</label><input type="email" name="email" id="email"></div>
                    <div><input type="submit" name="submit" id="submit" value="Submit">
                </form>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#submit').click(function(){
            $('error').remove();
            var fname = $('#fname').val();
            var lname = $('#lname').val();
            var username = $('#username').val();
            var password = $('#password').val();  
            var email = $('#email').val();
            var emailReg = /^([\w=\.]+@([\w=]+\.)+[\w=](2,4})?$/;
            var errors = false;

            if(fname=="") {
                errors = true;
                $('label[for=fname]').after('<span class="error">Missing data</span>');
            }
            if(lname=="") {
                errors = true;
                $('label[for=lname]').after('<span class="error">Missing data</span>');
            }
            if(username=="") {
                errors = true;
                $('label[for=username]').after('<span class="error">Missing data</span>');
            }
            if(password=="") {
                errors = true;
                $('label[for=password]').after('<span class="error">Missing data</span>');
            }
            else if(password==username){
                errors = true;
                $('label[for=password]').after('<span class="error">password and username match, try again</span>');
            }
            if(email=="") {
                errors = true;
                $('label[for=email]').after('<span class="error">Missing data</span>');
            }else if(!emailReg.test(email)){
                errors = true;
                $('label[for=email]').after('<span class="error">Email is not valid</span>');
            }
            if(errors==false){
                return true;
            }
            return false;
        });
    });
    </script>
</body>
</html>

Answer 1

你在第41行的正则表达式中缺少引号。试试这个：

var emailReg = '/^([\w=\.]+@([\w=]+\.)+[\w=](2,4})?$/';

标签后面显示跨度，这是您告诉它的位置。如果要在输入字段后显示它，请使用此选项。更改每个字段的名称：

 $("#fname").after('<span class="error"> Missing Data</span>');

Answer 2

让我先来快速解决一下：我相信你的意思是用 class 错误选择DOM元素：

$('.error').remove();

以下是两个主要考虑因素：

首先，确保在确定已加载提交DOM元素时绑定click事件。您可能希望将Javascript包装在$（document）.ready（）回调中。即使您的Javascript是在html之后显式编写的，使用.ready（）函数来确保DOM元素已经加载仍然是一个好习惯。

其次，请务必停止表单提交。目前，客户端将点击提交并进入其他页面，然后才能看到正在运行的Javascript。我们需要使用Javascript来首先验证数据，然后决定是否要继续提交表单。如果我们检测到空输入，我们可以使用preventDefault（）和stopPropagation（）来停止表单提交。

// wait for document to be ready and then attach behavior to events
$(document).ready(function(e) {
    // since document has loaded, we know that the #submit element is on the page
    $('#submit').click(function(e) {
        // remove all previous .error messages
        $('.error').remove();
        var fname = $('#fname').val();
        var lname = $('#lname').val();
        if (fname == '') {
            $('label[for=fname]').after('<span class="error"> Missing data</span>');
            // the user gave us invalid input so invoke these functions on the event to
            // prevent the form from submitting
            e.preventDefault();
            e.stopPropagation();
        }
        if (lname == '') {
            $('label[for=lname]').after('<span class="error"> Missing data</span>');
            e.preventDefault();
            e.stopPropagation();
        }
    });
});

以下是为我工作的JSFiddle：http://jsfiddle.net/NALG4/1/

希望这有帮助！

jQuery验证不返回span

2 个答案: