Question

我尝试通过检查是否已在文本框中输入内容来验证用户输入。我试图用javascript做到这一点。我想要实现的是，用户获得一个特定字段为空的警告框。跨度还将用于在所需字段上显示错误消息。用户开始输入后，应清除错误消息。请问我该怎么做？这是我到目前为止所做的，但它没有按预期工作，我觉得我在重复代码。 Fiddle

<form>
    <div id="Login">
        <div>
             <label for="signin_email">Email Address*: </label><input id="signin_email" name="signin_email" type="email" autofocus maxlength="50" /><span style="display:none;" id="signin_emailerror" name="signin_emailerror">*Please enter your Email address</span>
        </div>
        <div>
         <label for="signin_pword">Password*: </label><input id="signin_pword" name="signin_pword" type="password" maxlength="24"   /><span style="display:none;" id="signin_pworderror" name="signin_pworderror">*Please enter your Password</span>
        </div>
        <div>
           <button type="submit" id="signin" name="signin" value="Sign In" onclick="return signin_validate()">Sign in</button>
        </div>
    </div>

    <div id="register">
      <h2>Register here</h2>
          <div>
                <label for="fname">First Name*: </label>                        
                <input id="fname" name="fname" maxlength="30" type="text"  /><span style="display:none;" id="fnameerror" name="fnameerror">*Please enter your First Name</span>
          </div>
          <div>
            <label for="lname">Last Name*: </label><input id="lname" name="lname" maxlength="30" type="text"  /><span style="display:none;" id="lnameerror" name="lnameerror">*Please enter your Last Name</span>
          </div>
          <div>
            <button type="submit" id="register" name="register" value="Register" onclick="return validateForm()">Register</button>
          </div>
    </div>
</form>

使用Javascript：

function validateForm(){
var valid=true;
    var msg;
document.getElementById('fname').onkeyup=function(){
    if(document.getElementById('fname').value.length==0){
        valid=false;

        msg='Please enter your first name';
        document.getElementById('fnameerror').style.display='inline';
        document.getElementById('fnameerror').style.color='red';
        document.getElementById('fname').focus();
    }
    else{
        document.getElementById('fnameerror').style.display='none';
    }
if(document.getElementById('fname').value.length==0){
        document.getElementById('fnameerror').style.display='inline';
        document.getElementById('fnameerror').style.color='red';
        valid=false;
        document.getElementById('fname').focus();
        msg='Please enter your first name';
    }
    else{
        document.getElementById('fnameerror').style.display='none';
    }

    }
if(valid==false){
        alert(msg);
    }

    return valid;

}

    function signin_validate(){
    //VALIDATION FOR SIGN IN FORM
    //validating the password field
    //alert("You are here");
    var valid=true;
    var msg;

    if(document.getElementById('signin_email').value.length==0){
        valid=false;
        msg='Please enter your email';
        document.getElementById('signin_emailerror').style.display='inline';
        document.getElementById('signin_emailerror').style.color='red';
        document.getElementById('signin_email').focus();
    }


    else{

        document.getElementById('signin_emailerror').style.display='none';

        }
    document.getElementById('signin_email').onkeyup=function(){
        if(document.getElementById('signin_email').value.length==0){
        valid=false;
        msg='Please enter your email';
        document.getElementById('signin_emailerror').style.display='inline';
        document.getElementById('signin_emailerror').style.color='red';
        document.getElementById('signin_email').focus();
        }
        else{

        document.getElementById('signin_emailerror').style.display='none';

        }
    }

        if(valid==false){
        alert(msg);
    }

    return valid;


    }

另外，正如小提琴中所见，我必须以＆＃39;形式＆＃39;，登录和注册。当我在寄存器中的字段中输入内容并单击登录按钮时，无论我进入寄存器中的任何内容都会消失。这发生在Firefox上但不是Chrome上，请问如何解决这个问题？我需要创建两个单独的表单吗？这样做是否理想？

Answer 1

你似乎正在重新发明轮子一点点。为什么不简单地在输入字段中添加必需项以阻止它们为空？

http://www.w3schools.com/tags/att_input_required.asp

这样一来，它就会为你解决这个问题，并且你没有涉及可怕的警报信息

Answer 2

这是一个应该支持IE8 +的解决方案，但是没有IE8，所以我无法确认。它是用Vanilla JavaScript编写的，但你可以使用jQuery或其他一些框架来清理它。

降级浏览器

要模拟旧浏览器，我需要禁用所有＆＃34; required＆＃34;属性。即使您的浏览器不支持它也很好，因为HTML5标准的编码将允许您的网页向前兼容。

这是一种关闭＆＃34;关闭＆＃34;所有必需的输入。

// Strip out the require to simulate IE9
var simulateLegacyBrowser = function() {
    var nodes = document.querySelectorAll('[required=true]');
    Array.prototype.forEach.call(
        Array.prototype.slice.call(nodes),
        function(node) {
            node.required = false;
        });
};

设置HTML

如果由于旧版浏览器而无法访问所需属性，那么您可以做的最好的事情就是命名您的类。然后，您可以访问所有＆＃34; required＆＃34;类名称的元素。举个例子：

<form id='myForm'>
    <div class="required">
        <label for='field1'>Field 1</label>
        <input typue="text" id='field1' name='field1' required='true' />
        <span class='status'></span>
    </div>
    <div class="required">
        <label for='field2'>Field 1</label>
        <input typue="text" id='field2' name='field2' required='true' />
        <span class='status'></span>
    </div>
    <div>
        <input type='submit' />
    </div>
</form>

验证表格

要验证表单，您必须劫持onSubmit函数。使用JavaScript时，最好尽可能不引人注目。这意味着HTML不应该依赖于JavaScript。如果用户使用没有JavaScript的浏览器，则您必须使用服务器来验证表单。

这是代码。我不得不创建一些帮助方法来保持代码清洁并跨浏览器工作。这不是一个完整的证明解决方案，因为它只选择.required input s。您必须对其进行修改才能支持<select>，<textarea>等等。我将此作为练习留给您。

关于getNextNode的说明。我之所以不能调用node.nextSibling，是因为在某些浏览器中，node.nextSibling将返回下一个文本节点，相反，某些浏览器会返回下一个元素。因此，我们需要设置一个函数来确保跨浏览器的兼容性。

此代码可以进一步推广以使用您想要的任何形式，但我会留给您修复。

// Get the next Element
var getNextNode = function(root) {
    var node = root;
    do {
        node = node.nextSibling;
    } while ( node.nodeType != 1 );
    return node;
};

// Set an input as invalid
var setInvalid = function(input) {
    var status = getNextNode(input);
    status.textContent = "This is a required field";
    input.className = [input.className, 'invalid'].join(' ');
};

// Set an input as valid
var setValid = function(input) {
    var status = getNextNode(input);
    status.textContent = '';
    input.className = input.className.replace(/invalid/g, '');
};

document.forms['myForm'].onsubmit = function(e) {
    e.preventDefault();
    e.stopPropagation();
    // Change this to select required elements
    var requiredInputs = document.querySelectorAll('.required input'); 
    // Loop through each "required" input
    Array.prototype.forEach.call(
        Array.prototype.slice.call(requiredInputs),
        // For each input
        function(input) {
            // If it's valid is empty
            if (input.value.length === 0) {
                setInvalid(input);
            } else {
                setValid(input);
            }
        });
};

漂亮

为了让最终用户看起来很好看，如果允许，请尝试使用CSS。这会将您的演示文稿与逻辑分开。使用逻辑中的类来调用要应用的正确演示文稿。例如，以下是此演示文稿：

.required label:after {
    content: '*';
}

.required .status {
    color: red;
}

.required .invalid {
    border: 1px solid red;
}

全部放在一起

您可以在此jsFiddle查看一个有效的示例。祝你好运并享受有趣的编码！

高级解决方案

为了您的兴趣，jsFiddle提供了更先进的解决方案。我不会将代码附加到此解决方案，因为它超出了范围，但它更加可配置。在此解决方案中，您可以修改HTML，然后将HTML的状态设置添加到配置数组，这将根据输入的状态更新DOM。

使用不同的javascript函数验证用户输入

2 个答案:

降级浏览器

设置HTML

验证表格

漂亮

全部放在一起

高级解决方案