关于多输入表单验证的问题答案

【问题标题】：questions about muitiple input form validation关于多输入表单验证的问题
【发布时间】：2015-02-03 02:56:56
【问题描述】：

我正在尝试进行多个 js 验证。当我第一次单击提交按钮时，所有输入字段为空时一切正常，但如果我在输入字段中输入正确的表单，当我单击提交时，旧的警告文本仍然存在。

当我点击输入时，如果旧的红色警告文本有有效的输入，我该如何删除它？

function FormValidation(){
    var fn=document.getElementById('firstname').value;
    var em=document.getElementById('email').value;
    var atpos = em.indexOf("@");
    var dotpos = em.lastIndexOf(".");
    var phone = document.getElementById('phonenumber').value; 
    var ln=document.getElementById('lastname').value;

    if(fn==null || fn=="" || /[0-9]/g.test(fn)){
        document.getElementById('invalid_first').innerHTML="*please enter a valid first name.";
        document.getElementById('firstname').style.borderColor = "red";
    }
    if(ln==null || ln=="" || /[0-9]/g.test(ln)){
        document.getElementById('invalid_last').innerHTML="*Please Enter a Valid Last Name.";
        document.getElementById('lastname').style.borderColor = "red";
    }

    if(phone.length != 12 || phone[3]!= '-' || phone[7] != '-') {
        document.getElementById('invalid_phone').innerHTML="*Please enter a Valid Phone Number, ex:000-000-0000";
        document.getElementById('phonenumber').style.borderColor = "red";
             }
    if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=em.length) {
        document.getElementById('invalid_email').innerHTML="*Please Enter a valid Email Address.";
        document.getElementById('email').style.borderColor = "red";
    }
    return false;
}

【问题讨论】：

标签： javascript html forms validation

【解决方案1】：

使用 css display:none 隐藏和 display:block 显示或隐藏 div。在 javascript 中使用document.getElementById('my_id').style.display。每次运行验证功能时，您都必须手动删除边框颜色。

【讨论】：

【解决方案2】：

总之，

当您将错误添加到 HTML 中时，我会用 span 包装它们并给它一个 ID。当您在单击提交时检查值并且输入有效时，您可以删除具有指定 ID 的元素。

您的名字检查的简短修改示例（未经测试）将是：

if(fn==null || fn=="" || /[0-9]/g.test(fn)){ //if element is invalid
    document.getElementById('invalid_first').innerHTML="<span id="firstname-error">*please enter a valid first name.</span>";
    document.getElementById('firstname').style.borderColor = "red";
} else { //no errors on submit, remove error message element.
    document.getElementById('firstname-error').remove(); //replace firstname-error with every single ID you want to give an element.
    document.getElementById('firstname').style.borderColor = "#oldbordercolor"; //for resetting the bordercolor, change the #oldbordercolor to your default border-color
}

有更多方法可以在不使用 ID 的情况下从表单中删除错误，但这些方法在很大程度上取决于您的元素层次结构，以便以一种简单的方式进行说明。

【讨论】：