Javascript 使用onclick（）时，在输入中保留必需的标记

我正在使用带有required标签的输入，此时它不起作用，即使输入中没有一个字，提交也可以轻松完成。 我已经搜索了abit来寻找原因，我想这是因为我使用了onclick函数

<form id="regform" method="POST">
First name: <input type="text" id="firstname" required  ><br>
Last name: <input type="text" id="lastname" required ><br>
Username: <input type="text" id="username" required><br>
Password: <input type="password" id="password" required><br>
<input type="radio" name="sex" value="male" required>Male<br>
<input type="radio" name="sex" value="female" >Female
<input type="submit" value="Register" onclick="regBtn(event)">
</form>

function regBtn(event) {
    if (!Array.prototype.slice.call(document.querySelectorAll('input[required]:not([required=false])')).every(function (element) {
        return element.value != '';
    })) {
        return false;
    }
    //main function
}

名字：

姓氏：

用户名：

密码：

男性

女性

---

使用onclick时是否有办法保持所需的活动状态？

是。现在你有这样一句话：

document.getElementById("regform").submit();

忽略任何内置验证，只提交表单

相反，将函数调用移动到表单的onsubmit，如下所示：

<form id="regform" method="POST" onsubmit="return regBtn(event);">

<form id="regform" method="POST">
First name: <input type="text" id="firstname" class="required"><br>
Last name: <input type="text" id="lastname" class="required" ><br>
Username: <input type="text" id="username" class="required"><br>
Password: <input type="password" id="password" class="required"><br>
<input type="radio" name="sex" value="male" class="required">Male<br>
<input type="radio" name="sex" value="female" >Female
<input id="submit" type="submit" value="Register" onclick="regBtn(event)">
</form>

这将保留内置的HTML5表单验证

---

-用户名只有一个或两个字母才能看到手动验证生效。

请记住：Internet Explorer 9和早期版本或Safari不支持输入标记的必需属性

更安全的做法是这样做：

<form id="regform" method="POST" onsubmit="return regBtn(event);">

<form id="regform" method="POST">
First name: <input type="text" id="firstname" class="required"><br>
Last name: <input type="text" id="lastname" class="required" ><br>
Username: <input type="text" id="username" class="required"><br>
Password: <input type="password" id="password" class="required"><br>
<input type="radio" name="sex" value="male" class="required">Male<br>
<input type="radio" name="sex" value="female" >Female
<input id="submit" type="submit" value="Register" onclick="regBtn(event)">
</form>

---

在regBtn函数中添加一些行

<form id="regform" method="POST">
First name: <input type="text" id="firstname" required  ><br>
Last name: <input type="text" id="lastname" required ><br>
Username: <input type="text" id="username" required><br>
Password: <input type="password" id="password" required><br>
<input type="radio" name="sex" value="male" required>Male<br>
<input type="radio" name="sex" value="female" >Female
<input type="submit" value="Register" onclick="regBtn(event)">
</form>

function regBtn(event) {
    if (!Array.prototype.slice.call(document.querySelectorAll('input[required]:not([required=false])')).every(function (element) {
        return element.value != '';
    })) {
        return false;
    }
    //main function
}