0

我正在编写一个基本的表单验证脚本，基本上当我们浏览表单时，每个字段都会像这样检查 onblur

            <p>
                <label>Full Name *</label>
                <input type="text" id="fullName" value="" onblur="validate('FullName', 'fullName');" /> 
                <span class="formHint" id="hintFullName">Enter your full name</span>
                <span id="errorFullName"></span>
                <span class="success" id="successFullName"><img src="images/tick.png" /></span>
            </p>

这一切都可以正常调用我制作的函数验证，以便您可以将字段名称传递给它，它只会检查它是否已输入等。这一切都很好。下面是验证功能。

    function validate(field) {


    // Get the  value of the input field being submitted
    value = document.getElementById(field).value;

    // Set the error field tag in the html
    errorField = 'error' + field;

    // Set the success field
    successField = 'success' + field;

    if (value != '') {
        document.getElementById(successField).style.display = 'block';
        document.getElementById(errorField).style.display = 'none';
    } else {
        document.getElementById(successField).style.display = 'none';
        document.getElementById(errorField).style.display = 'block';
    }
}

现在我的问题是，在使用 onblur 即时验证之后，提交时我继续进行的最佳方式是什么？我需要编写另一个函数来手动检查所有表单字段还是有更好的方法。

我已经考虑了一段时间，但我似乎想不出提交后最好的检查方式。

对不起，如果这没有任何意义，现在让自己困惑了几个小时。

提前谢谢了。

4

1 回答 1

1

啊，验证！

是的，您需要手动检查。“手动”将如何不同。它可能是直截了当的粗暴手册，如下所示：

function handleOnSubmit(e) {
    validate('FullName');
    validate('ZipCode');
    validate('City');

    // Loop through all error fields and see if any are present
}

如您所知，效率不是很高...

相反，让我们编写一个循环来完成它！

但在此之前，我建议更新您的validate函数以在存在/不存在错误时返回 true/false。

就像是：

if (value != '') {
    document.getElementById(successField).style.display = 'block';
    document.getElementById(errorField).style.display = 'none';
    return true;
} else {
    document.getElementById(successField).style.display = 'none';
    document.getElementById(errorField).style.display = 'block';
    return false;
}

好的！

现在我们可以创建一个父验证器，它可以validate使用所有表单元素调用您的函数。

就像是：

function handleOnSubmit(e) {
    // Query your elements some how
    var inputs = document.forms[0].getElementsByTagName('input');

    // Loop your elements
    for (i = 0, len = inputs.length; i < len; i++) {
        if( validate(inputs[i].id) === false) {
            // Error occurred - we'll prevent the form submission
            e.preventDefault();
        }
    }
}

这是一个用于演示的 JSFiddle：http: //jsfiddle.net/ww2grozz/

另一种方式（如果您不想在已验证的元素上再次运行验证多次）是保持“已验证”对象的状态。然后，您可以检查这些。

像这样的东西：

var validated = {};

function validate(field) {
    // Existing logic

    if (value != '') {
        validated[field] = true;
    } else {
        validated[field] = false;
    }
}

然后，回到上面的父验证器：

function handleOnSubmit(e) {
    // Query your elements
    var inputs = document.forms[0].getElementsByTagName('input');

    // Loop your elements
    for (i = 0, len = inputs.length; i < len; i++) {
        var name = inputs[i].id;

        if (!validated[name]) {
            // Prevents submission
            e.preventDefault();

            // Call validate
            validate(name);
        }
    }
}

第二个小提琴：http: //jsfiddle.net/ww2grozz/2/

最后，如果这将用于服务器......不要忘记服务器端验证！

于 2014-11-26T20:30:23.003 回答