Question

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

            <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动态验证后，提交时我最好的方法是什么？我是否需要编写另一个函数来手动检查所有表单字段，或者是否有更好的方法。

我一直在思考它，但我似乎无法想出提交后检查的最佳方法。

很抱歉，如果其中任何一项都没有意义，那么我自己会困扰几个小时。

非常感谢提前。

Answer 1

啊，验证！

是的，您需要手动检查。如何＆＃34;手动＆＃34;会有所不同。它可能是直的，粗暴的手册，如下：

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/

另一种方式（如果您不希望在已经验证的元素上再次运行验证倍数）是维持＆＃34;验证的状态＆＃34;对象。然后你可以检查那些。

这样的事情：

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/

最后，如果要进入服务器......请不要忘记服务器端验证！

Javascript表单验证，onblur验证和提交

1 个答案: