Fatal编程技术网
  • javascript/
  • Javascript Submit事件上有两个函数，只有其中一个有效。都不要(((

Javascript Submit事件上有两个函数，只有其中一个有效。都不要(((

javascript function

Javascript Submit事件上有两个函数，只有其中一个有效。都不要(((,javascript,function,onsubmit,Javascript,Function,Onsubmit,因此，我一直在尝试创建一个表单，在验证此信息后将信息添加到表中（动态插入表）。因此，我有两个主要函数，它们在单击提交按钮时都会被调用。但是！不幸的是，当时只有一个能工作，我的意思是如果我编写onsubmit=“validateForm（）”它可以工作。如果我写onsubmit=“myFunction（）”它可以工作！但是如果我使用onsubmit=“vaidateForm（）&&myFunction（）”它们都不工作。请帮助我让验证和插入表函数都工作 我几乎完成了验证功能 <!DOCTY

因此，我一直在尝试创建一个表单，在验证此信息后将信息添加到表中（动态插入表）。因此，我有两个主要函数，它们在单击提交按钮时都会被调用。但是！不幸的是，当时只有一个能工作，我的意思是如果我编写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>    


名字
姓
电话
性别
年龄
提交
名字
姓
电话
性别
年龄
删除


函数validatefirstName（信息）{
var u=document.forms.info.firstName.value
var uLength=u.长度；
var illegalChars=/\W//；//允许使用字母、数字和下划线
如果（u==null | | u==“”）{
警报（“您将名字字段留空”）；
返回false；
}否则如果（U长度<4 | | U长度>11）{
警报（“姓氏必须介于4到11个字符之间”）；
返回方式；
}else if（非法字符测试（u））{
警报（“名字包含非法字符”）；
返回false；
}否则{
返回true；
}
}
函数validatelastName（信息）{
var u=document.forms.info.lastName.value
var uLength=u.长度；
var illegalChars=/\W//；//允许使用字母、数字和下划线
如果（u==null | | u==“”）{
警报（“您将姓氏字段留空”）；
返回false；
}否则如果（U长度<4 | | U长度>11）{
警报（“姓氏必须介于4到11个字符之间”）；
返回方式；
}else if（非法字符测试（u））{
警报（“姓氏包含非法字符”）；
返回false；
}否则{
返回true；
}
}
函数allnumeric（信息）{
var n=document.forms.info.phone.value
变量数=/^[0-9]+$/；
如果（匹配（数字））{
警惕（“干杯”）；
n、 焦点（）；
返回true；
}否则{
警报（“请仅输入数字字符”）；
n、 焦点（）；
返回false；
}
}
功能年龄（信息）{
var n=document.forms.info.age.value
变量数=/^[0-9]+$/；
如果（匹配（数字））{
警惕（“干杯”）；
n、 焦点（）；
返回true；
}否则{
警报（“请仅输入数字字符”）；
n、 焦点（）；
返回false；
}
}
函数validateForm（）{
if（validatefirstName（）&&lastName（）&&allnumeric（）&&age（））返回true；
否则返回false；
}
函数myFunction（e）{
e、 预防默认值（）；
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；
//添加表行
var table=document.getElementById（“myTable”）；
var row=table.insertRow（）；
var cell0=row.insertCell（）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
var cell4=行插入单元格（3）；
var cell5=行插入单元格（4）；
var cell6=行插入单元格（5）；
cell1.innerHTML=fName；
cell2.innerHTML=lName；
cell3.innerHTML=手机；
cell4.innerHTML=性别；
cell5.innerHTML=年龄；
//清除表行
document.getElementById（“info”）.reset（）；
//“创建”按钮，用于删除表行
var button=document.createElement（“按钮”）；
button.id=“redButton”；
button.innerHTML=“X”；
单元格6.追加子项（按钮）；
button.onclick=函数（）{
this.parentNode.parentNode.parentNode.removeChild（this.parentNode.parentNode）；
}
}
如果
&&
的左侧返回falsy值，则不会对右侧进行求值，因为
&
短路：一旦知道其结果为falsy，它将返回该值，而不会对右侧进行求值

如果您希望这两个函数始终运行，那么您不能使用
&
。虽然您可以做什么并使用
&
，但我建议不要这样做，当您认为（或其他人认为）这是一个打字错误时，它会给您带来维护问题。相反，我会定义一个新函数：

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为 “Phone”，名称为“Phone”（带空格）
  • 在allnumeric（）和age（）中，您试图对string.value而不是HTML元素使用.focus（）
    • 但是，&&并没有评价这部右手歌剧