Fatal编程技术网
  • javascript/
  • 如何使用JavaScript添加JavaScript警报消息以显示html表单验证是正确的

如何使用JavaScript添加JavaScript警报消息以显示html表单验证是正确的

javascript html forms validation

如何使用JavaScript添加JavaScript警报消息以显示html表单验证是正确的,javascript,html,forms,validation,Javascript,Html,Forms,Validation,我有以下链接到HTML文件的JavaScript函数，它们由HTML文件中的recordHistory（）按钮调用。JavaScript在功能上运行良好，但我希望在名为recordHistory（）的函数中包含一条警告消息，以表明一旦HTML表单验证中的文本字段完成且正确无误。一旦用户可以单击HTML文件中的onclick Record按钮，就会出现一条警告消息，说明“文本字段正确且已记录”。JavaScript函数如下所示：- // JavaScript Document function v

我有以下链接到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-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;
    }   
}

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;
}   
}
但是这个JavaScript代码不起作用，因为发生了一个新的JavaScript错误：-错误：解析错误：意外的标记{

我确实看到您已经在使用validateFirstName和validateLastName函数对firstname和lastname进行验证

我相信你会在这个领域使用onfocusout

在再次单击按钮时执行另一个验证可能是双重工作。因此，如果FirstName或LastName验证在相应的函数本身上失败，我建议您禁用该按钮

添加以下行：

document.getElementById("somebuttonid").disabled = true;
因此，在这两个字段按照您的意愿进行验证之前，提交按钮将被禁用。这也比用警报中断它们要好

让我知道这是否可行。

@Subramania Prasad感谢您为我指明了正确的方向。 验证每个正则表达式是否正确后，用户可以单击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">&nbsp;</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>


记录
函数recordHistory（）{//用于通过记录按钮验证客户端的输入文本字段
var fName=document.getElementById（“firstName”）.value；
var lName=document.getElementById（“lastName”）.value；
var fNameRegExp=/^[a-zA-Z\s\'\-]{2,25}$/；
如果（fName==''| lName==''）{
警告（“请填写所有文本字段…！！！！！”；
返回false；
}
else if（fName==fNameRegExp）{
//真名
}
否则{
警报（“输入数据正确”）；
返回true；
}
}
谢谢您的帮助！但我确实需要在单击录制按钮时发出警报（我已经更新了我的原始问题，以显示HTML记录按钮代码，并进一步解释了我必须实现的目标。@wire_jp我也是一个初学者，所以我在JSFIDLE中尝试了这段代码，但没有进行验证。这似乎行得通，我注意到一个问题是，在更新的javascript中，1.循环是if，else if andelse而不是2 else 2。第二个else将return true作为第一行，因此如果它与函数中的任何后续语句匹配，则不会执行。为了演示第2点，我在JSFIDLE中对return true语句进行了注释，如果它未注释，则不会触发警报。@Subramania Prasad:我在版本1中运行了代码。在j中对于版本2的代码，我试图将其修改为if、else、ifand else函数，但出现了错误。 
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">&nbsp;</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>