Question

不使用JQuery，我在页面上有多个表单，没有重写函数，你可以帮我解决这个问题吗？

<html><head>
<script type="text/javascript">
function validPhone()   {
                            if(document.all.[phoneVar].value.length <= 7)
                            alert("You must enter a valid phone number");
                            document.all.[phoneVar].focus() ;
                            return false;
                        }


</script>
</head><body>

<script type="text/javascript">
function checkThisParticularForm()  {
    var phoneVar = document.GetElementById('phone').value; //set element id
    validPhone(); //this calls the validPhone function
}
</script>

<form action="./logging.php" method="post" enctype="multipart/form-data" name="NewCallForm" onsubmit="checkThisParticularForm();">
<input type="text" class="textbox" id="phoneNumber" name="phoneNumber" value="" />
<input type="submit"  value="Submit Details">
</form>

</body></html>

在提交每个表单时，我希望它验证某些字段，在本例中是电话号码，但我想创建一个可以被其他表单调用的主要功能，以便它包含一个变量[phoneVar]，我试图在调用该函数之前声明它。对不起，如果这很简单，我对JavaScript不好，任何帮助/指针都很感激。

Answer 1

这是一种简单的方法，但首先要将所有表单包装在div id="allforms"中。

window.onload = function () {
    document.getElementById('allforms').addEventListener('submit', function (e) {
        var pn = e.target.phoneNumber;
        if (pn.value.length <= 7) {
            alert("You must enter a valid phone number");
            pn.focus() ;
            e.preventDefault();
        }
    });
}

我们的想法是submit事件气泡到div，只有你需要做的就是在submit上监听div个事件。这称为事件委托。

侦听器函数中的

e.target指的是触发事件的元素。在这种情况下，它是form元素，用于求和。

由于e.target是form，您可以直接引用指定的form元素。 document.all是IE特定的，在IE11中已经过时。

e.preventDefault()会阻止事件后的默认操作，在这种情况下，它会阻止提交表单。

A live demo at jsFiddle

^{如果您还需要IE＆lt; 9的支持，请告诉我，我会添加代码。}

Answer 2

考虑编写验证库并使用HTML5 data-foo属性来完成所有脏工作：

<form ...>
    <input type="text" name="foo"
        data-validation-required="true">

    <input type="text" name="phone"
        data-validation-required="true"
        data-validation-required-message="The phone number is required"
        data-validation-format="^\\d{3}-\\d{3}-\\d{4}"
        data-validation-format-message="Please enter a valid phone number">

</form>

创建一个JavaScript库来进行验证：

var Validator = {
    init: function() {
        document.documentElement.addEventListener("submit", this.handleSubmit.bind(this), false);
    },

    handleSubmit: function(event) {
        var form = event.target.form || event.target,
            requiredFields = form.querySelectorAll("[data-validation-required=true"),
            formattedFields = form.querySelectorAll("[data-validation-format]");

        if (!this.validateRequiredFields(requiredFields)) {
            event.preventDefault();
        }
        else if (!this.validateFormats(formattedFields)) {
            event.preventDefault();
        }
    },

    validateRequiredFields: function(fields) {
        var regex = /^\s*%/, i = 0,
            success = true;

        for (i; i < fields.length; i++) {
            if (regex.test(fields[i].value)) {
                this.showMessage(fields[i].getAttribute("data-valiation-required-message") || "This field is required", fields[i]);
                success = false;
            }
        }
    }

    validateFormats: function(fields) {
        var format, field,
            i = 0, length = fields.length,
            success = true;

        for (i; i < length; i++) {
            field = fields[i];
            format = new RegExp(field.getAttribute("data-validation-format"));

            if (!format.test(field.value)) {
                this.showMessage(field.getAttribute("data-validation-format-message"), field);
                success = false;
            }
        }

        return success;
    },

    showMessage: function(message, field) {
        field.classList.add("invalid");
        var span = document.createElement("span");
        span.className = "validation-error";
        span.innerHTML = message;
        field.parentNode.insertBefore(span, field);
    }
};

Validator.init();

这就是整页所需的全部内容，因为document.documentElement是<html>标记。由于submit事件会使文档树冒泡，您只需要一个提交处理程序。

（注意：这是未经测试的代码，但应该给你基本的想法）

页面上有多个表单，最小化验证功能

2 个答案: