2 个函数 onSubmit 事件，只有其中任何一个有效.两者 - 不要 (((. - 2 functions onSubmit event , only either of them works. Both

所以我一直在尝试创建一个表单，在验证此信息后将信息添加到表中（正在动态插入表）。所以我有 2 个主要函数，单击提交按钮时都会调用它们。但！不幸的是，当时只有一个有效，我的意思是如果我写 onsubmit="validateForm（）" 它可以工作。如果我写 onsubmit="myFunction（）" 它可以工作！但是如果我使用 onsubmit="vaidateForm（） && myfunction（）"它们都不起作用。请帮助我使验证和插入表功能都正常工作。

我几乎完成了验证函数

 <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/    css/bootstrap.min.css"
          integrity="    sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7    " crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/    css/bootstrap-theme.min.css"
          integrity="sha384-fLW2N01lMqjakBkx3l/    M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
</head>
<body onload="document.info.firstName.focus();">
<div class="container">
    <form onsubmit="return validateForm() && myFunction(event)" id="info" name="    info">
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group">
                    <label for="firstName">First Name</label>
                    <input type="text" class="form-control" id="firstName" name="    firstName" placeholder="First Name">
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label for="lastName">Last Name</label>
                    <input type="text" class="form-control" id="lastName" name="    lastName" placeholder="Last Name">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="form-group">
                    <label for="phone">Phone</label>
                    <input type="text" class="form-control" id="Phone" name="    phone" placeholder="Phone">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="form-group">
                    <label for="gender">Gender</label>
                    <input type="text" class="form-control" id="Gender" name="    gender" placeholder="Gender">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="form-group">
                    <label for="age">Age</label>
                    <input type="text" class="form-control" id="Age" name="age"     placeholder="Age">
                </div>
            </div>
            <div class="col-xs-12">
                <button type="submit" class="btn btn-default">Submit</button>
            </div>
    </form>

    <table id="myTable" class="table table-striped">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Phone</th>
            <th>Gender</th>
            <th>Age</th>
            <th>Delete</th>
        </tr>
    </table>
    <br>
</div>
<script type="text/javascript">
    function validatefirstName(info) {
        var u = document.forms.info.firstName.value
        var uLength = u.length;
        var illegalChars = /W/; // allow letters, numbers, and underscores
        if (u == null || u == "") {
            alert("You left First Name field empty");
            return false;
        } else if (uLength < 4 || uLength > 11) {
            alert("Last Name must be between 4 and 11 characters");
            return fasle;
        } else if (illegalChars.test(u)) {
            alert("First Name contains illegal characters");
            return false;
        } else {
            return true;
        }
    }
    function validatelastName(info) {
        var u = document.forms.info.lastName.value
        var uLength = u.length;
        var illegalChars = /W/; // allow letters, numbers, and underscores
        if (u == null || u == "") {
            alert("You left Last Name field empty");
            return false;
        } else if (uLength < 4 || uLength > 11) {
            alert("Last Name must be between 4 and 11 characters");
            return fasle;
        } else if (illegalChars.test(u)) {
            alert("Last Name contains illegal characters");
            return false;
        } else {
            return true;
        }
    }
    function allnumeric(info) {
        var n = document.forms.info.phone.value
        var numbers = /^[0-9]+$/;
        if (n.match(numbers)) {
            alert('Cheers');
            n.focus();
            return true;
        } else {
            alert('Please input numeric characters only');
            n.focus();
            return false;
        }
    }
    function age(info) {
        var n = document.forms.info.age.value
        var numbers = /^[0-9]+$/;
        if (n.match(numbers)) {
            alert('Cheers');
            n.focus();
            return true;
        } else {
            alert('Please input numeric characters only');
            n.focus();
            return false;
        }
    }

    function validateForm() {
        if (validatefirstName() && lastName() && allnumeric() && age()) return     true;
        else return false;
    }
    function myFunction(e) {
        e.preventDefault();
        var form = document.forms.info;
        var fName = form.elements.firstName.value;
        var lName = form.elements.lastName.value;
        var phone = form.elements.phone.value;
        var gender = form.elements.gender.value;
        var age = form.elements.age.value;

        //add table rows
        var table = document.getElementById("myTable");
        var row = table.insertRow();
        var cell0 = row.insertCell();
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        cell1.innerHTML = fName;
        cell2.innerHTML = lName;
        cell3.innerHTML = phone;
        cell4.innerHTML = gender;
        cell5.innerHTML = age;
        //clear table rows
        document.getElementById("info").reset();
        //create button that deletes table rows
        var button = document.createElement("BUTTON");
        button.id = "redButton";
        button.innerHTML = "X";
        cell6.appendChild(button);
        button.onclick = function () {
            this.parentNode.parentNode.parentNode.removeChild(this.parentNode.    parentNode);
        }

    }
</script>
</body>
</html>

如果&&的左侧返回一个 falsy 值，则根本不会评估右侧，因为&&短路：一旦它知道它的结果将是 falsy，它就会返回该值而不计算右侧。

如果您希望这两个函数始终运行，则不能使用 && 。虽然您可以按照 Thinker 的建议进行操作并使用&，但我建议不要这样做，当您认为（或其他人认为）这是一个错字时，它会让您在以后遇到维护问题。相反，我会定义一个新函数：

function doBothOfThem(event) {
    // Note: Important that we always call both functions
    var r1 = validateForm();
    var r2 = myFunction(event);
    return r1 && r2;
}

。然后使用它。

您在第一个函数"fasle"而不是"false"中有一个拼写错误。
您还使用了 lastName（）而不是 validatelastName（）。
document.forms.info.phone.value 不存在，因为 id 是"电话"，名称是"电话"（带空格）。
在 allnumeric（）和 age（）中，您尝试在字符串 .value 上使用 .focus（）而不是 HTML 元素。

2 个函数 onSubmit 事件，只有其中任何一个有效.两者 - 不要 (((.

相关内容

最新更新

热门标签：