Question

这是我写的代码：

名字和姓氏字段是“必需的”，因此它们不能保持为空。这就是我想要“提交”按钮来检查的内容。

用户名必须介于8到12个字符之间，且必须以字母开头，且不得为空。这就是我希望我的“有效”按钮检查。（只需单击“有效”按钮即可调用所有4个函数）

但是当我点击“有效”按钮时，它还会检查名字和姓氏是否为空。我该如何解决这个问题？

<!DOCTYPE html>
<html>
<head>
<script>
function underflow() {
    var x = document.forms["regForm"]["uname"].value;
    if (x.length < 8) {
        alert("username too short");
        return false;
    }
}

function overflow() {
    var x = document.forms["regForm"]["uname"].value;
    if (x.length > 12) {
        alert("username too long");
        return false;
    }
}

function pattern() {
    var x = document.forms["regForm"]["uname"].value;
    if (x.pattern != "^[a-zA-Z][a-zA-Z0-9\.\-_]{1,12}$") {
        alert("pattern mismatch");
        return false;
    }
}

function empty() {
    var x = document.forms["regForm"]["uname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>
</head>
<body>
<form name="regForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
first name: <input type="text" name="fname"  required="required"><br>
last name: <input type="text" name="lname"  required="required"><br>

username: <input type="text" name="uname" id="uname"><br>
<button onclick="underflow() overflow() pattern() empty()">valid?</button></td>

<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Answer 1

默认情况下，按钮将提交其包装表单。将type="button"属性添加到按钮，以防止它提交表单并检查名字和姓氏。

表单提交和检查按钮混淆了

1 个答案: