我是一個苗條和 js 新手。我正在嘗試向我一直用來將資料發送到 firebase 的表單添加驗證，但我很難做到這一點。我正在取一個名字和一個電子郵件。我不想屏蔽電子郵件或任何特殊的東西，只要有空值就可以了。如果有人知道該怎么做，請告訴我。這是我的代碼
<script>
import tilt from "svelte-tilt";
import { ConfettiExplosion } from "svelte-confetti-explosion";
import { clickOutside } from "./clickOutside.js";
import { Router, Route, Link } from "svelte-routing";
import Privacy from "../routes/privacy.svelte";
import { db } from "../firebase/config";
import { collection, doc, setDoc } from "firebase/firestore";
let data = [
"Test Data","Test"Data"
];
let isVisible = false;
let openModel = false;
const toggleModel = () => {
openModel = !openModel;
if (openModel === true) {
isVisible = true;
}
};
let userName = "";
let userMail = "";
let addData = async () => {
const Data = collection(db, "waitlist users");
try {
await setDoc(doc(Data), {
name: userName,
email: userMail,
});
toggleModel();
} catch (error) {
console.log(error);
}
};
</script>
<section hljs-attr">lg:py-24">
<main
hljs-number">3 py-4 2xl:container mx-auto flex-col-reverse lg:flex-row flex justify-between items-center"
>
<div hljs-attr">lg:w-[30%] grid grid-cols-1 gap-5 px-4">
{#each data as item, index}
<div
hljs-number">36 p-4"
use:tilt
>
{#if index === 0}
<p hljs-string">">
{item}
</p>
{:else if index === 1}
<p hljs-variable constant_">C3A7E6]">
{item}
</p>
{:else}
<p hljs-string">">
{item}
</p>
{/if}
</div>
{/each}
</div>
<div hljs-attr">lg:w-[70%] text-white flex justify-center">
<main hljs-number">14 lg:pt-0">
<div>
<h1 hljs-attr">md:text-5xl capitalize font-bold">
Way to Go!
</h1>
</div>
<p hljs-attr">sm:ext-2xl">
Join now:
</p>
<form hljs-number">12">
<div>
<label
for="name"
hljs-number">1 text-left font-semibold text-sm ">Name</label
>
<input
type="text"
id="name"
required
bind:value={userName}
hljs-string">"
placeholder="John Doe"
/>
</div>
<div>
<label
for="email"
hljs-number">1 mt-2 text-left font-semibold text-sm "
>Email</label
>
<input
type="email"
id="email"
required
bind:value={userMail}
hljs-string">"
placeholder="name@domain.com"
/>
</div>
<Router>
<p
hljs-number">2 text-[10px] sm:text-sm text-gray-700 text-right mb-1"
>
We’ll never share your details. Read our
<Link to="/privacy">
<!-- svelte-ignore a11y-missing-attribute -->
<a
hljs-attr">hover:underline bg-gradient-to-r from-purple-400 to-[#92a0eb]"
>
Privacy Policy.
</a>
</Link>
</p>
<Route path="/privacy">
<Privacy />
</Route>
</Router>
<div hljs-string">">
<button
on:click|preventDefault={addData}
hljs-keyword">from-[#aac0f1] via-[#aac0f1] to-#eac3ed border hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-[#aac0f1] shadow-lg shadow-[#aac0f1] font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 "
>Join</button
>
</div>
</form>
</main>
</div>
{#if openModel}
<div
hljs-number">0 left-0 right-0 fixed z-50 bg-black/70 "
>
<main hljs-string">">
<div
use:clickOutside
on:click_outside={toggleModel}
hljs-number">16 sm:p-20 text-center rounded-lg"
>
<h1 hljs-string">">Congratulation</h1>
{#if isVisible}
<ConfettiExplosion particleCount={200} force={0.3} />
{/if}
<p>Your request has been submitted</p>
</div>
</main>
</div>
{/if}
</main>
</section>
uj5u.com熱心網友回復：
實際上它很容易，你可以使用簡單的 js 邏輯來完成它，無需考慮它基于 svelte 或其他任何東西。在你的腳本中創建一個函式
function validation_check(userName, userMail) {
if (userName === "") {
return false;
} else if (userMail === "") {
return false;
} else {
return true;
}
}
然后使用上述函式在按鈕上設定條件
{#if openModel}
<div
class=" w-full h-screen top-0 left-0 right-0 fixed z-50 bg-black/70 "
>
<main
class=" flex justify-center items-center w-full h-full relative"
>
<div
use:clickOutside
on:click_outside={toggleModel}
class="bg-white p-16 sm:p-20 text-center rounded-lg"
>
<h1 class=" font-bold text-2xl">Congratulation</h1>
{#if isVisible}
<ConfettiExplosion particleCount={200} force={0.3} />
{/if}
<p>Your request has been submitted</p>
</div>
</main>
</div>
{/if}
{:else}
<div class="flex justify-end">
<p
class="text-white bg-gradient-to-r from-[#aac0f1] via-[#aac0f1] to-#eac3ed border hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-[#aac0f1] shadow-lg shadow-[#aac0f1] font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 "
>
Fill in all the details.
</p>
</div>
{/if}
這就是您的所有驗證都可以正常作業
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496962.html
標籤：javascript