我有以下链接到 HTML 文件的 JavaScript 函数，因为它们由 HTML 文件中的 recordHistory() 按钮调用。JavaScript 在功能上运行良好，但我想在名为 recordHistory() 的函数中包含一条警告消息，以表明一旦 HTML 表单验证中的文本字段完整且正确。一旦用户可以单击 HTML 文件中的 onclick 记录按钮，将出现一条警告消息，说明“文本字段正确且已记录”。JavaScript 函数如下所示：-// JavaScript Documentfunction validateFirstName() { //test input for 2-15 allowed characters var fName = document.getElementById("firstName").value; var rel = /^[a-zA-Z\s\'\-]{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-Z\s\'\-']{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; } }基本上，我可以专注于 html 文本框字段，当我单击“记录”按钮时，会出现一个警告框，提示“HTML 表单的所有输入字段都必须完成。一旦我在HTML 表单的文本框字段并单击“记录”按钮，没有显示任何消息（但我知道验证已完成且正确）。我的目标是确保一旦正确验证了 HTML 表单的输入字段，警报消息将显示为“文本框字段中的所有数据均正确并已记录”。我是这里的新手，正在阅读一些内容，这似乎是所有 JavaScript 正则模式表达式都已正确匹配。
2 回答
慕容森
TA贡献1853条经验 获得超18个赞
一旦每个正则表达式都被验证为正确，用户可以单击 recordHistory 按钮，然后会弹出一个警告说“数据输入正确”我使用此代码来获得我正在寻找的结果：-
<!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-Z\s\'\-]{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>
慕丝7291255
TA贡献1859条经验 获得超6个赞
我确实看到您已经在使用 validateFirstName 和 validateLastName 函数对名字和姓氏进行验证。
我相信您会使用该字段的任一 onfocusout 来执行此操作。
再次单击按钮时进行另一次验证可能是双重工作。因此，如果 FirstName 或 LastName 验证在这些各自的功能上失败，我建议您禁用该按钮。
添加以下行：
document.getElementById("somebuttonid").disabled = true;因此，在这两个字段按照您的意愿进行验证之前，提交按钮将被禁用。这也比用警报打断他们更好的用户体验。
让我知道这是否可行。
添加回答
举报
0/150
提交
取消