Javascript表单验证

Question

我试图弄清楚什么是验证必填字段的最简单方法,而不必为每个元素的名称执行if语句.也许只是一个循环并验证它的类.

我想要完成的只是检查类名为"必需"的那些

<input name="a1" class="required" type="text" />
<input name="a2" class="" type="text" />
<input name="a3" class="required" type="text" />

谢谢

Answer 1

我并不反对其他人建议的图书馆,但我认为你可能想要一些如何自己做的样本,我希望它有所帮助.

这应该工作:

function validate() {
    var inputs = document.getElementsByTagName("input");

    for (inputName in inputs) {
        if (inputs[inputName].className == 'required' && inputs[inputName].value.length == 0) {
            inputs[inputName].focus();
            return false;
        }
    }

    return true;       
}

还可以说你的输入是一个名为"theForm"的形式:

function validate() {
    for (var i = 0; i < theForm.elements.length; i++) {
        if (theForm.elements[i].className == "required" && theForm.elements[i].value.length == 0) {
            theForm.elements[i].focus();
            return false;
        }
    }

    return true;
}

当然,你会修改值和/或为应用程序添加适当的验证逻辑,但我相信你可以从样本中获得想法.

您还可以在输入本身上存储任意数据,并使用getAttribute()元素上的方法读取它.例如,您可以在html中使用此元素(正则表达式需要3位数字):

<input name="a1" validate="true" regex="[0-9]{3}" type="text" />

您可以使用此方法在验证例程中运行正则表达式.

function validate() {
    for (var i = 0; i < theForm.elements.length; i++) {
        var elem = theForm.elements[i];

        if (elem.getAttribute("validate") == "true") {
            if (!elem.value.match(elem.getAttribute("regex"))) {
                elem.select();
                return false;
            }
        }
    }

    return true;
}

希望这可以帮助.