如何使用 JavaScript 添加 JavaScript 警报消息以显示 html 表单验证正确
我有以下链接到 HTML 文件的 JavaScript 函数，因为它们由 HTML 文件中的 recordHistory() 按钮调用。JavaScript 在功能上运行良好，但我想在名为 recordHistory() 的函数中包含一条警告消息，以表明一旦 HTML 表单验证中的文本字段完整且正确。一旦用户可以单击 HTML 文件中的 onclick 记录按钮，将出现一条警告消息，说明“文本字段正确且已记录”。JavaScript 函数如下所示：-
// JavaScript Document
function 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回答
-
慕容森
一旦每个正则表达式都被验证为正确，用户可以单击 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 buttonvar 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
我确实看到您已经在使用 validateFirstName 和 validateLastName 函数对名字和姓氏进行验证。我相信您会使用该字段的任一 onfocusout 来执行此操作。再次单击按钮时进行另一次验证可能是双重工作。因此，如果 FirstName 或 LastName 验证在这些各自的功能上失败，我建议您禁用该按钮。添加以下行：document.getElementById("somebuttonid").disabled = true;因此，在这两个字段按照您的意愿进行验证之前，提交按钮将被禁用。这也比用警报打断他们更好的用户体验。让我知道这是否可行。
随时随地看视频慕课网APP
相关分类
JavaScript