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

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;


    }

此外，正如小提琴中所见，我必须“表单”、登录和注册。当我在注册的字段中输入内容并单击登录按钮时，我输入的任何内容都会消失。这发生在firefox上但不是在chrome上，请问如何解决这个问题？我需要创建两个单独的表格吗？这样做是否理想？

Answer 1

您似乎在重新发明轮子。 为什么不简单地在输入字段中添加 required 以防止它们为空？

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

这样它就会为你解决这个问题，而且你根本不会收到可怕的警报信息

Answer 2

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

降级浏览器

要模拟旧浏览器，我需要禁用所有“必需”属性。即使您的浏览器不支持它们，也最好包含它们，因为 HTML5 标准的编码将允许您的网页向前兼容。

这是一种“关闭”所有必需输入的方法。

// 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

如果您由于旧版浏览器而无法访问所需的属性，那么您可以做的下一个最好的事情就是为您的类命名。然后，您可以通过类名访问所有“必需”元素。举个例子：

<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 inputs。您必须修改它以支持<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。