所以我一直在尝试创建一个表单，在验证此信息之后向表中添加信息（动态插入表）。所以我有两个主要功能，当点击提交按钮时都会被调用。但是！不幸的是，当时只有其中一个有效，我的意思是如果我写onsubmit =＆＃34; validateForm（）＆＃34;有用。如果我写onsubmit =＆＃34; myFunction（）＆＃34;有用 ！但如果我使用onsubmit =＆＃34; vaidateForm（）＆amp;＆amp; myfunction（）＆＃34;它们都不起作用。请帮助我获得验证和插入表功能。
我几乎完成了验证功能
<!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>
答案 0 :(得分：1)
如果&&的左侧返回一个假值，则根本不会评估右手，因为&&短路：一旦知道其结果将是假的，它返回该值而不评估右侧。
如果您希望两个函数始终运行，则无法使用&&。虽然您可以执行Thinker suggested并使用&，但我会建议不这样做，它会在以后为您设置维护问题认为（或其他人认为）这是一个错字。相反，我定义了一个新函数：
function doBothOfThem(event) {
// Note: Important that we always call both functions
var r1 = validateForm();
var r2 = myFunction(event);
return r1 && r2;
}
...然后使用它。
答案 1 :(得分：0)
答案 2 :(得分：-1)
像这样定义onsubmit
onsubmit="return validateForm() & myFunction(event)"
&评估两个操作数。
希望有所帮助：）