Javascript 表单提交和检查按钮混淆_Javascript_Html

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

javascript html

Javascript 表单提交和检查按钮混淆,javascript,html,Javascript,Html,以下是我编写的代码： “名字”和“姓氏”字段是“必填”字段，因此它们不能保持为空。这就是我希望我的“提交”按钮检查的内容用户名必须在8到12个字符之间，并且必须以字母开头，并且不能为空。这就是我想让我的“有效”按钮检查的。（必须通过单击“有效”按钮调用所有4个函数）但当我点击“有效”按钮时，它也会检查名字和姓氏是否为空。我如何解决这个问题 <!DOCTYPE html> <html> <head> <script> function und

以下是我编写的代码：

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

用户名必须在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>


函数下溢（）{
var x=document.forms[“regForm”][“uname”].value；
如果（x.长度<8）{
警告（“用户名太短”）；
返回false；
}
}
函数溢出（）{
var x=document.forms[“regForm”][“uname”].value；
如果（x.长度>12）{
警告（“用户名太长”）；
返回false；
}
}
函数模式（）{
var x=document.forms[“regForm”][“uname”].value；
如果（x.pattern！=“^[a-zA-Z][a-zA-Z0-9\.\-\\\\\\.[UUZ]{1,12}$”）{
警报（“模式不匹配”）；
返回false；
}
}
函数为空（）{
var x=document.forms[“regForm”][“uname”].value；
如果（x==“”）{
警告（“必须填写姓名”）；
返回false；
}
}
名字：

姓氏：

用户名：

有效吗？

默认情况下，按钮将提交其包装表单。向按钮添加

type=“button”

属性，以防止其提交表单并检查名字和姓氏。

您不需要将每个函数包含在其自己的

脚本

元素中。只需用一个

包装所有JavaScript即可。此外，如果字段标记为

必需

，那么为什么要再次检查它们？接下来，使用一个

onclick

event属性调用多个语句，每个语句必须用

与下一个语句分开。您还有一个表单。提交事件处理程序以及提交按钮。单击事件处理程序。在表单中进行验证。仅提交
。最后，如果您只需在输入字段中使用必需
和模式
属性，则根本不需要进行JavaScript验证。我在单击提交按钮时编辑了s，将检查名字和姓氏。但当我点击“有效”按钮时，它也会检查我不想要的名字和姓氏，如果可以，请回答这个问题。我想在单击“有效”按钮时调用所有这4个函数。请阅读我的其余评论。当您单击按钮以及表单提交时，您正在运行您的功能。谢谢。它起作用了，但我的按钮不起作用。它不会调用所有函数。但是，当我删除4个函数中的3个时，剩下的函数将正常工作。知道如何修复它吗？在关闭函数validate（）{underflow（）；overflow（）；pattern（）；empty（）；}
之前，在脚本标记中添加并将按钮更改为valid？