javascript - 将 bool 值设置为 false 以停止 event.preventDefault-6ren

javascript - 将 bool 值设置为 false 以停止 event.preventDefault

转载作者：行者123 更新时间：2023-11-28 03:04:16

我有一个表单，用户需要在其中写下他们的名字、姓氏、电子邮件地址和电话号码。用户必须位于英国才能使用此功能。

如果输入为空或格式不正确，我可以毫无问题地阻止提交表单，但是，一旦所有输入值都正确，我就无法成功提交表单。

我知道这与我的 stopSubmit 代码有关，但一旦所有输入值正确。

这是我的 JavaScript 代码:

window.onload = function () {
let theForm = document.getElementById("form");
theForm.addEventListener("submit", function (event) {
    let stopSubmit = false;
    for (let i = 0; i < theForm.elements.length; i++) {
        cleanUpErrors();
        if (!checkFirstName(theForm.elements[0])) {
            theForm.elements[i].style.borderColor = "#990000";
            stopSubmit = true;
        }
        if (!checkLastName(theForm.elements[1])) {
            theForm.elements[i].style.borderColor = "#990000";
            stopSubmit = true;
        }
        if (!checkEmail(theForm.elements[2])) {
            theForm.elements[i].style.borderColor = "#990000";
            stopSubmit = true;
        }
        if (!checkPhone(theForm)) {
            theForm.elements[i].style.borderColor = "#990000";
            stopSubmit = true;
        }
    }
    if (stopSubmit) {
        event.preventDefault();
    }
    }, false)
}

function checkFirstName(input) {
    let elemPos = document.getElementById("firstName");
    let inputValue = input.value;
    let errorMessage = "";
    if (inputValue === null || inputValue === "") {
        errorMessage = "This field is empty.";
    }
    if (inputValue !== "") {
        if (inputValue.length < 3) {
            errorMessage = "This field has less than 3 characters.";
        }
    }
    renderErrorMessage(elemPos, errorMessage);
}

function checkLastName(input) {
    let elemPos = document.getElementById("lastName");
    let inputValue = input.value;
    let errorMessage = "";
    if (inputValue === null || inputValue === "") {
        errorMessage = "This field is empty.";
    }
    if (inputValue !== "") {
        if (inputValue.length < 3) {
            errorMessage = "This field has less than 3 characters.";
        }
    }
    renderErrorMessage(elemPos, errorMessage);
}

function checkEmail(input) {
    let elemPos = document.getElementById("email");
    let emailValue = input.value;
    let errorMessage = "";
    let regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!emailValue.match(regex)) {
        errorMessage = "Not a valid email address.";
    }
    if (emailValue === "") {
        errorMessage = "This field is empty.";
    }
    renderErrorMessage(elemPos, errorMessage);
}

function checkPhone(input) {
    let elemPos = input.phone;
    let phoneValue = input.phone.value;
    let errorMessage = "";
    let regex = /^(((\+44\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((\+44\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((\+44\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$/;
    if (!phoneValue.match(regex)) {
        errorMessage = "Not a valid UK phone number.";
    }
    if (phoneValue === "") {
        errorMessage = "This field is empty.";
    }
    renderErrorMessage(elemPos, errorMessage);
}

function renderErrorMessage(selectedElem, errorMessage) {
    let errorElem = document.createElement("span");
    errorElem.setAttribute("class", "error");
    let errorText = document.createTextNode(errorMessage);
    errorElem.appendChild(errorText);
    selectedElem.parentNode.insertBefore(errorElem, selectedElem.nextSibling);
    return selectedElem;
}

function cleanUpErrors() {
    let indicator = document.getElementsByTagName("span");
    for (let i = 0; i < indicator.length; i++) {
        indicator[i].setAttribute("class", "hide");
    }
}

这是我的 HTML 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Personal Information Form</title>
    <script src="scripts/test5.js"></script>
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
<form id="form" action="test3success.html" novalidate="novalidate">
    <label for="firstName">First Name (required)</label>
    <input id="firstName" type="text" name="text" required>

    <label for="lastName">Last Name (required)</label>
    <input id="lastName" type="text" name="text" required>

    <label for="email">Email (required)</label>
    <input id="email" type="email" required>

    <label for="phone">Phone Number (required)</label>
    <input id="phone" type="tel" required>

    <button type="submit">Submit</button>
</form>
</body>
</html>

最佳答案

考虑到您是在 if 语句中评估这些检查，您的检查需要返回 true 或 false。

所以，当你在做的时候

if (!checkFirstName(theForm.elements[0])) {

计算结果为

如果(!未定义){

由于checkFirstName(和其他)不返回任何内容(undefined)，这意味着stopSubmit始终设置为true

注意:有更简洁的方法可以做到这一点，我只是检查了 errorMessage 是否为空。

此外，正如评论中所指出的，您将整个表单传递给 checkPhone 函数，而您可以像处理其他检查一样传递输入。

window.onload = function () {
  let theForm = document.getElementById("form");
  theForm.addEventListener("submit", function (event) {
    let stopSubmit = false;
    for (let i = 0; i < theForm.elements.length; i++) {
        cleanUpErrors();
        if (!checkFirstName(theForm.elements[0])) {
            theForm.elements[i].style.borderColor = "#990000";
            stopSubmit = true;
        }
        if (!checkLastName(theForm.elements[1])) {
            theForm.elements[i].style.borderColor = "#990000";
            stopSubmit = true;
        }
        if (!checkEmail(theForm.elements[2])) {
            theForm.elements[i].style.borderColor = "#990000";
            stopSubmit = true;
        }
        if (!checkPhone(theForm)) {
            theForm.elements[i].style.borderColor = "#990000";
            stopSubmit = true;
        }
    }
    if (stopSubmit) {
        event.preventDefault();
        console.log('default prevented')
    }
    }, false)
}

function checkFirstName(input) {
    let elemPos = document.getElementById("firstName");
    let inputValue = input.value;
    let errorMessage = "";
    if (inputValue === null || inputValue === "") {
        errorMessage = "This field is empty.";
    }
    if (inputValue !== "") {
        if (inputValue.length < 3) {
            errorMessage = "This field has less than 3 characters.";
        }
    }
    renderErrorMessage(elemPos, errorMessage);
    if (errorMessage !== "") {
       return false
    }
    
    return true
    
}

function checkLastName(input) {
    let elemPos = document.getElementById("lastName");
    let inputValue = input.value;
    let errorMessage = "";
    if (inputValue === null || inputValue === "") {
        errorMessage = "This field is empty.";
    }
    if (inputValue !== "") {
        if (inputValue.length < 3) {
            errorMessage = "This field has less than 3 characters.";
        }
    }
    renderErrorMessage(elemPos, errorMessage);
    if (errorMessage !== "") {
       return false
    }
    
    return true
}

function checkEmail(input) {
    let elemPos = document.getElementById("email");
    let emailValue = input.value;
    let errorMessage = "";
    let regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!emailValue.match(regex)) {
        errorMessage = "Not a valid email address.";
    }
    if (emailValue === "") {
        errorMessage = "This field is empty.";
    }
    renderErrorMessage(elemPos, errorMessage);
    if (errorMessage !== "") {
       return false
    }
    
    return true
}

function checkPhone(input) {
    let elemPos = input.phone;
    let phoneValue = input.phone.value;
    let errorMessage = "";
    let regex = /^(((\+44\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((\+44\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((\+44\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$/;
    if (!phoneValue.match(regex)) {
        errorMessage = "Not a valid UK phone number.";
    }
    if (phoneValue === "") {
        errorMessage = "This field is empty.";
    }
    renderErrorMessage(elemPos, errorMessage);
    
    if (errorMessage !== "") {
       return false
    }
    
    return true
}

function renderErrorMessage(selectedElem, errorMessage) {
    let errorElem = document.createElement("span");
    errorElem.setAttribute("class", "error");
    let errorText = document.createTextNode(errorMessage);
    errorElem.appendChild(errorText);
    selectedElem.parentNode.insertBefore(errorElem, selectedElem.nextSibling);
    return selectedElem;
}

function cleanUpErrors() {
    let indicator = document.getElementsByTagName("span");
    for (let i = 0; i < indicator.length; i++) {
        indicator[i].setAttribute("class", "hide");
    }
}

label, .error, button {
  display: block;
}

<form id="form" action="test3success.html" novalidate="novalidate">
    <label for="firstName">First Name (required)</label>
    <input id="firstName" type="text" name="text" required>

    <label for="lastName">Last Name (required)</label>
    <input id="lastName" type="text" name="text" required>

    <label for="email">Email (required)</label>
    <input id="email" type="email" required>

    <label for="phone">Phone Number (required)</label>
    <input id="phone" type="tel" required>

    <button type="submit">Submit</button>
</form>

关于javascript - 将 bool 值设置为 false 以停止 event.preventDefault，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60746503/

文章推荐： c++ - 构建 C++ XPCOM 依赖错误

文章推荐： css - 如何根据导航栏高度计算正文填充？

文章推荐： html - 应用外部 CSS 文件时出现问题

文章推荐： c++ - 无法实例化抽象类，但我有

c# - 如何将 bool 转换为可为 null 的 bool(bool？)
我有一个带有列的表提供者 implied(tiny int)(something like nullable bool) provi
c# - 为什么编译器将 bool 转换为整数并返回 bool 而不是返回 bool 本身？
我正在阅读 VideoFileWriter来自 AForge.Video.FFMPEG 的类(class)通过 ILSPY 组装(我很想看看特定方法是如何工作的)并发现了这个: public bool
flutter - 无法将类型 'bool?' 的值分配给类型 'bool' 的变量，因为 'bool?' 可以为 null，而 'bool' 则不能
这是我的完整代码... import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import
haskell - 从 [Maybe Bool] 中获得一个 Bool，该 Bool 保证至少包含一个 Just
我有一个输入 list类型 [Maybe SomeType]和一个谓词 p类型 SomeType -> Bool ，我想回答这个问题“谓词 p 是否适用于所有碰巧在输入中的 SomeType ？”。
转换为 bool : `!!` vs `(bool)`
使用 !!x 有什么区别吗？对比(bool)x ？假设__STDC_VERSION__ >= 199901L和 #include 他们都保证结果是0吗？或 1 ，并且无论 x 的大小和值如何，都不
c++ - (bool | bool) 安全吗？
我正在编写一些 C++ 代码，我想调用两个函数(checkXDirty 和 checkYDirty)，并返回 true如果任一返回 true。即使一个返回 true 我也需要评估两者，所以我的第一个想
c++ - "#define bool bool"当我悬停 bool 时说 QtCreator - 我将其跟踪到 boost::asio
我注意到 bool在 QtCreator 中以不同于其他类型的颜色突出显示: 只有在包含某些 header 时才会发生这种情况，最终我将其追踪到 . QtCreator 的代码检查器似乎无法手动跟踪
ios - 类型 "Int -> Bool","Int-> Bool -> Int","Int-> String -> Int－> Bool"
有一个函数: func (first: Int) -> Int -> Bool -> String { return ? } 返回值怎么写？我对上面 func 的返回类型感到很困惑。最
python - 为什么 tf.cond() 将 tf.bool 识别为 python bool 而不是 tf.bool？
训练神经网络学习“异或” 我正在尝试使用“批量归一化”，我创建了一个批量归一化层函数“batch_norm1”。 import tensorflow as tf import nump
c# - 如何从 C# 中的异步任务函数获取 bool 结果 - 错误 : Cannot implicitly convert type `void' to `bool'
我已经创建了任务函数来验证我的 json 文件。一切正常，直到我没有使用结果。当我试图从 async task function 获得结果时它显示错误为 Cannot implicitly conve
Swift.Bool 不是 Bool 吗？
我有一个函数 func login (parameters: [(String, Any)], completion: @escaping (Bool) -> Vo
正则表达式用 bool 替换 bool 值
我正在处理最近从 X/Motif 转移到 Qt 的 C++ 代码库。我正在尝试编写一个 Perl 脚本，它将用 bool 替换所有出现的 Boolean(来自 X)。该脚本只是做了一个简单的替换。 s
flutter - 无法将参数类型Future 分配给参数类型 'bool'
嗨，我正尝试创建一个Visiblity小部件，如果用户在Firebase数据库阵列上，该小部件将显示。看起来像这样(成员数组): 如您所见，我创建了一个StreamBuilder，如果当前用户的用户名
if-statement - Flutter中的Future vs bool
我创建了如下的rest api方法， Future activateAccount(int id, int code) async{ final body = {"code": '$c
flutter - 如何将Future 转换为Stream
在我的Flutter应用中，我有一个返回Future的函数，但我想将结果作为Stream。这是函数: Future isGpsOn() async { if (await Geolocat
SQLAlchemy bool 值与 bool 值
我可以看到 BOOLEAN 覆盖了 __visit_name__ class BOOLEAN(Boolean): __visit_name__ = 'BOOLEAN' 控制调度员选择的访问者方
c# - 分配 bool 值？ bool
考虑以下代码: bool x; bool? y = null; x = y?? true; 将 bool? 分配给 bool 是一个编译时错误，但上面的代码在编译和运行时都成功了。为什么？尽管第三条语
javascript( bool 值 ^ bool 值)
我正在重写一些 Javascript 代码以在 Excel VBA 中工作。由于在这个网站上搜索，我已经设法翻译了几乎所有的 Javascript 代码!但是，有些代码我无法准确理解它在做什么。这是一
boolean - 预期类型 `bool` ，发现类型 `&bool`
我想拍一张bool来自Vec并在 if 语句中进行比较。如何解决以下错误？ | 7 | if cell { | ^^^^ expected
ios - bool _WebTryThreadLock(bool) 崩溃
我在我的应用程序崩溃跟踪工具中发现了一些崩溃。基本上我有一个 tabBarController，其中一个选项卡有一个嵌入式 UIWebView，另一个选项卡有一个带有 UITableView 的 Co

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 将 bool 值设置为 false 以停止 event.preventDefault