validation 相关问题

验证用于检查数据，以确保它符合为其设置的任何所需规范。通常，验证用于检查输入数据，以及在存储之前验证数据。

我尝试创建用于发布新用户的表单，但遇到问题。我使用引导表单验证（浏览器默认值）。有一个按钮：我尝试创建用于发布新用户的表单，但遇到问题。我使用引导表单验证（浏览器默认值）。有一个按钮： <button class="btn btn-primary btn-addUser" type="submit">Add User</button> 此按钮还具有根据输入的数据创建新帖子的功能： const addUsersBtn = document.querySelector(".btn-addUser"); // кнопка добавления поста в html addUsersBtn.addEventListener("click", postNewUser); // Запостить юзера function postNewUser(e) { e.preventDefault(); // записать value из инпутов формы const name = form.elements.namedItem("name").value; const username = form.elements.namedItem("username").value; const email = form.elements.namedItem("email").value; const phone = form.elements.namedItem("phone").value; const website = form.elements.namedItem("website").value; // создать объект нашего юзера из данных записанных в переменные из инпутов формы const newPost = { name: name, username: username, email: email, phone: phone, website: website, user_id: `id_${Math.random() * Math.random()}`, }; // создать пост createPost(newPost, (response) => { const card = newPostTemplate(response); container.insertAdjacentElement("afterbegin", card); form.reset(); initPopovers(); }); } 但是如果我使用 postNewUser 功能验证不起作用。如果我从按钮验证中删除“btn-addUser”类。我的代码来自 addUser.js 文件： // получаем нашу форму const form = document.forms["addUser"]; // создаём функцию "создать пост" function createPost(body, callback) { return new Promise((resolve, reject) => { const request = new XMLHttpRequest(); request.open("POST", "https://jsonplaceholder.typicode.com/posts"); request.addEventListener("load", () => { const response = JSON.parse(request.responseText); // console.log(response); if (request.status >= 400) { reject(request.response); } else { resolve(request.response); } callback(response); }); request.setRequestHeader("Content-type", "application/json; charset=UTF-8"); request.send(JSON.stringify(body)); }); } // шаблон для поста в котором он будет строится function newPostTemplate(post) { const card = document.createElement("div"); card.classList.add("card"); const cardBody = document.createElement("div"); cardBody.classList.add("card-body"); const userBtn = document.createElement("button"); userBtn.setAttribute("type", "button"); userBtn.classList.add("btn", "btn-info", "btn-lg"); userBtn.setAttribute("data-bs-toggle", "popover"); userBtn.setAttribute("data-bs-html", "true"); userBtn.setAttribute( "data-bs-title", "Additional information about the user: " ); userBtn.setAttribute( "data-bs-content", `Username: ${post.username}<br/>Email: ${post.email}<br/>Phone: ${post.phone}<br/> Website: ${post.website}` ); const title = document.createElement("h5"); title.classList.add("card-title"); title.textContent = post.name; userBtn.appendChild(title); cardBody.appendChild(userBtn); card.appendChild(cardBody); return card; } // кнопка добавления поста в html addUsersBtn.addEventListener("click", postNewUser); // Запостить юзера function postNewUser(e) { e.preventDefault(); // записать value из инпутов формы const name = form.elements.namedItem("name").value; const username = form.elements.namedItem("username").value; const email = form.elements.namedItem("email").value; const phone = form.elements.namedItem("phone").value; const website = form.elements.namedItem("website").value; // создать объект нашего юзера из данных записанных в переменные из инпутов формы const newPost = { name: name, username: username, email: email, phone: phone, website: website, user_id: `id_${Math.random() * Math.random()}`, }; // создать пост createPost(newPost, (response) => { const card = newPostTemplate(response); container.insertAdjacentElement("afterbegin", card); form.reset(); initPopovers(); }); } 我想问一些问题：我可以创建两个按钮：第一个按钮没有“btn-addUser”类，第二个按钮有“btn-addUser”类吗？我想添加一个按钮禁用状态（引导程序），并在提交时删除它们，而没有“btn-addUser”类收到验证的积极响应。单击“btn-addUser”按钮后，此按钮将被禁用。是真的？我不知道如何获得验证的积极响应。或者也许我正在做垃圾，它可以做得更简单？ postNewUser 函数中的自定义表单提交逻辑与浏览器内置的表单验证之间似乎存在冲突。当“btn-addUser”类出现在提交按钮上时，自定义逻辑将接管并跳过验证。要解决此问题，您可以调整 postNewUser 函数以在创建新用户之前检查表单是否有效。方法如下： function postNewUser(e) { e.preventDefault(); if (form.checkValidity()) { // Form is valid, proceed with creating the new user // Add your custom logic here } else { // Form is invalid, trigger validation UI form.classList.add("was-validated"); } } 通过使用form.checkValidity()方法，您可以检查表单是否有效。如果是，则 if 块内的代码将运行并创建新用户。如果没有，else 块会将“was-validated”类添加到表单中，这是一个显示验证消息的 Bootstrap 类。确保您的表单具有必要的 Bootstrap 验证属性和类，例如表单元素上的 novalidate 以及表单输入上的适当验证类。通过这种方法，您可以保留“btn-addUser”按钮，并确保表单验证与自定义提交逻辑一起顺利运行。

javascript forms validation bootstrap-5

回答 1 投票 0

使用数组进行正则表达式验证

我有一个数组 $array = ['download.png', 'download-1.png', 'download-2.png'] 我想要一个可以匹配所有三个元素的正则表达式。到目前为止我已经尝试并得到了类似的东西 /('."$

php regex validation

回答 2 投票 0

如何在按下 HTML 提交按钮后禁用该按钮？

我正在使用 PHP 和 JavaScript 开发一个注册页面。当用户按下“提交”按钮时，页面在重定向之前开始加载。如果用户再次按“提交”，则...

javascript php html validation

回答 1 投票 0

在网址中添加尾部斜杠（如果不存在）

我正在制作一个小型 Web 应用程序，用户在其中输入一个服务器 URL，通过 AJAX 请求从中提取大量数据。由于用户必须手动输入 URL，人们通常会忘记该输入...