我有以下链接到HTML文件的JavaScript函数，因为它们是由HTML文件中的recordHistory((按钮调用的。JavaScript在功能上运行良好，但我希望在名为recordHistory((的函数中包含一条警告消息，以表明一旦HTML表单验证中的文本字段完整且正确。一旦用户可以点击HTML文件中的onclick Record按钮，就会出现一条警告消息，说明"；文本字段是正确的并且被记录"；。JavaScript函数如下所示：-
// JavaScript Document
function validateFirstName() { //test input for 2-15 allowed characters
var fName = document.getElementById("firstName").value;
var rel = /^[a-zA-Zs'-]{2,15}$/;
if (rel.test(fName)) { //if input is valid, update page to show successful entry}
document.getElementById("firstNamePrompt").style.color = "green";
document.getElementById("firstNamePrompt").innerHTML = "<strong>valid</strong>"
return true;
}
else { //if input is invalid, update page to prompt for new input
document.getElementById("firstNamePrompt").style.color = "Red";
document.getElementById("firstNamePrompt").innerHTML = "<strong>Enter 2&15</strong>"
return false;
}
}
function validateLastName() { //test input for 2-25 allowed characters
var lName = document.getElementById("lastName").value;
var re2 = /^[a-zA-Zs'-']{2,25}$/;
if (re2.test(lName)) { //if input is valid, update page to show successful entry}
document.getElementById("lastNamePrompt").style.color = "green";
document.getElementById("lastNamePrompt").innerHTML = "<strong>valid</strong>"
return true;
}
else { //if input is invalid, update page to prompt for new input
document.getElementById("lastNamePrompt").style.color = "Red";
document.getElementById("lastNamePrompt").innerHTML = "<strong>Enter 2&25</strong>"
return false;
}
}
function recordHistory(){//function to validate input text fields on client side, via record button
var fName = document.getElementById("firstName").value;
var lName = document.getElementById("lastName").value;
if( fName ==='' || lName ===''){
alert("Please fill all text fields...!!!!!!");
return false;
}else{
return true;
}
}
html文件有以下带有recordHistory((函数的按钮：
<tr>
<td class="Button" id="Button" colspan="3"><span class="buttonBG" onclick="recordHistory();">Record</span></td>
</tr>
基本上，我可以集中在html文本框字段内外，当我单击"记录"按钮时，会出现一个警告框，上面写着"；HTML表单的所有输入字段都必须完成。一旦我在HTML表单的文本框字段中手动输入所需的数据，并单击"记录"按钮，就不会显示任何消息(但我知道验证是完整和正确的(。我的目标是确保一旦HTML表单的输入字段被正确地验证，一个警告消息将显示给"；文本框字段中的所有数据都是正确的并已记录"；。我是这里的一个新手，我正在读一些书，这似乎是所有JavaScript正则模式表达式都正确匹配的结果。
我更新了RecordHistory((的JavaScript函数，以包含一些匹配所有正则表达式的代码：-
function recordHistory(){//function to validate input text fields on client side, via record button
var fName = document.getElementById("firstName").value;
var lName = document.getElementById("lastName").value;
if( fName ==='' || lName ===''){
alert("Please fill all text fields...!!!!!!");
return false;
}else{
return true;
if(!(fName).match(fNameReg) || (!(lName).match(lNameReg)){
alert("All text fields are correct and recorded!"");
return true;
}else{
return false;
}
}
}
但是这个JavaScript代码没有工作，因为出现了一个新的JavaScript错误：-error:解析错误：意外的令牌｛
我确实看到您已经在使用validateFirstName和validateLastName函数对名字和姓氏进行验证。
我相信你会使用该领域的任一onfocusout来做这件事。
在再次单击按钮的同时进行另一次验证可能是双重工作。因此，如果FirstName或LastName验证失败，我建议您禁用该按钮。
添加以下行：
document.getElementById("somebuttonid").disabled = true;
因此，在这两个字段按照您的意愿进行验证之前，要提交的按钮将被禁用。这也将是一个更好的用户体验，而不是用警报来干扰他们。
让我知道这是否可行。
<!DOCTYPE html>
<html>
<body>
<form action="#">
<div id="fullpage">
<tr>
<td class="Button" id="Button" colspan="3"><span class="buttonBG" onclick="recordHistory();">Record</span></td>
</tr>
<span id="recordConfirm"> </span>
</div>
</form>
<script>
function recordHistory(){//function to validate input text fields on client side, via record button
var fName = document.getElementById("firstName").value;
var lName = document.getElementById("lastName").value;
var fNameRegExp = /^[a-zA-Zs'-]{2,25}$/;
if( fName ==='' || lName ===''){
alert("Please fill all text fields...!!!!!!");
return false;
}
else if(fName === fNameRegExp){
//First Name true
}
else{
alert("input data is correct");
return true;
}
}
</script>
</body>
</html>