Javascript 为什么我的警报不能在我的一个功能中工作？_Javascript_Html_Css

Javascript 为什么我的警报不能在我的一个功能中工作？

javascript html css

Javascript 为什么我的警报不能在我的一个功能中工作？,javascript,html,css,Javascript,Html,Css,我希望nameVerification函数在用户点击submit时抛出警报消息。例如，如果用户在name字段中输入45之类的内容，我希望调用nameVerification函数中的警报。现在，当用户在name字段中键入数字时，formSubmission函数中的警报将被调用旁注： formSubmissionfunction可以完美地工作。换句话说，如果用户在年龄字段中输入一个小于13的数字，则会正常调用函数警报，不会出现任何问题。如果用户输入一个大于13的数字，它也可以正常工作。我想我也会让

我希望nameVerification函数在用户点击submit时抛出警报消息。例如，如果用户在name字段中输入45之类的内容，我希望调用nameVerification函数中的警报。现在，当用户在name字段中键入数字时，formSubmission函数中的警报将被调用

旁注： formSubmissionfunction可以完美地工作。换句话说，如果用户在年龄字段中输入一个小于13的数字，则会正常调用函数警报，不会出现任何问题。如果用户输入一个大于13的数字，它也可以正常工作。我想我也会让你们知道的

signUp.html

<!DOCTYPE html>
<html>
<head>
    <title>Signup Form</title>
    <script type="text/javascript" src="signUp.js"></script>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet"  href="signUp.css">
<body>

<form class="col-md-4 col-md-offset-4" name="formHandler" id="handle">
        <div class="moveUsername">
            <label for="usr">Name:</label>
            <input type="field" class="form-control" id="nameVerify" placeholder="Username" required="required">    
        </div>

        <div class="ageMovement">
            <label for="usr" >Age (Must be 13 years or older to play):</label>
            <input type="field" class="form-control" id="ageVerify" name="ageChecker" placeholder="Age" required="required">
        </div>

        <button type="submit" class="btn btn-default" onclick="formSubmission()" onclick="nameVerification()">Submit</button>
    </form>

</body>
</html>

signUp.js

  function nameVerification() {
    var name = document.getElementById("nameVerify").value;

    if(typeof name !== 'string') {
        alert("That's not a name!");
    }   
}

function formSubmission() {
    var age = document.getElementById("ageVerify").value;

    if(age < 13) {
        alert("You're too young, you can't play the game");
    }   
}

年龄也是此函数中的字符串：

function formSubmission() {
    var age = document.getElementById("ageVerify").value;

    if(age < 13) {
        alert("You're too young, you can't play the game");
    }   
}

function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

如果要进行数字比较，首先需要分析：

function formSubmission() {
    var age = document.getElementById("ageVerify").value;

    if (age) {
       var ageInteger = parseInt(age, 10);

       if (ageInteger < 13) {
           alert("You're too young, you can't play the game");
       }
    } 
}

这是因为javascript尚未加载

移动：

<script type="text/javascript" src="signUp.js"></script>

就在标签上方

按钮上有两个onclick属性

<button type="submit" class="btn btn-default" onclick="formSubmission()" onclick="nameVerification()">Submit</button>

您只能有一个

您应该使用parseInt：

var age = parseInt(document.getElementById("ageVerify").value);

您的typeof测试失败，因为从文本输入返回的值始终是string类型。您可以使用以下函数测试所提供的文本值是否为数字：

function formSubmission() {
    var age = document.getElementById("ageVerify").value;

    if(age < 13) {
        alert("You're too young, you can't play the game");
    }   
}

function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

然而，真正的答案是，你需要改进你的输入验证测试来确定你想要什么，而不是测试所有你不想要的东西。例如,如果有人输入t^,上述数字测试将不起作用!！在字段中，这可能不是您希望在名称字段中使用的值。这里有5个字段可以提供帮助。

您可以按如下方式更改名称验证功能：

函数名验证{ var name=document.getElementByIdnameVerify.value

    if (name) {
        var num = parseInt(name) || -1;
        if (num >= 0 && num < 13) {
            alert("That's not a name!");
        }
    }
}

并将html中的onclick值更改为：

onclick=formSubmission；nameVerification

哦，好的。我使用的逻辑是，如果是同一个submit按钮可能导致这些错误，我可能还必须有两个onclick属性。不幸的是，您只能有一个。所以nameVerification从未真正被调用。为什么有两个onclick属性？您可以将它们压缩为一个li例如：onclick=formSubmission；nameVerificational因此，您的'name'变量将始终为string类型-因此即使执行了nameVerification，条件警报调用也不会运行。您应该检查空字符串的工作原理！谢谢您：D。不过，请您解释一下-1的用途好吗？再次感谢：.Sure、检查的第一部分是查看输入的值是否可以解析为整数值，如果无法解析，则-1将充当错误检查。如果不是数字，则返回-1。您可以使用其他检查，如javascript中的NaN等，但这似乎更简单。因此，如果返回-1，则输入文本而不是数字.