验证表单中的空字符串

wmvff8tz  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(779)

我有一个表单,它接受用户的输入并将其连接到url(用函数编写)。如何检查users值是否为空,并在表单下方显示一条警告,提示“请输入有效的店铺url”。不用重新编写我的整个函数!救命啊!
输入表格

  1. <form id="url">
  2. <input type="text" name="urlName">
  3. <button onclick="return myFunction()">Try it</button>
  4. </form>

javscript函数

  1. document.getElementById("url").addEventListener("submit", myFunction);
  2. function myFunction() {
  3. let myForm = document.getElementById("url");
  4. let formData = new FormData(myForm);
  5. EndOfUrl = sanitizeDomainInput(formData.get("urlName"));
  6. newUrl = redirectLink(EndOfUrl);
  7. window.location.href = newUrl;
  8. return false;
  9. }
  10. function sanitizeDomainInput(input) {
  11. input = input || 'unknown.com'
  12. if (input.startsWith('http://')) {
  13. input = input.substr(7)
  14. }
  15. if (input.startsWith('https://')) {
  16. input = input.substr(8)
  17. }
  18. var regexp = new RegExp(/^(([a-zA-Z]{1})|([a-zA-Z]{1}[a-zA-Z]{1})|([a-zA-Z]{1}[0-9]{1})|([0-9]{1}[a-zA-Z]{1})|([a-zA-Z0-9][a-zA-Z0-9-_]{1,61}[a-zA-Z0-9]))\.([a-zA-Z]{2,6}|[a-zA-Z0-9-]{2,30}\.[a-zA-Z]{2,3})$/)
  19. return regexp.test(input) ? input : 'unknown.com';
  20. }
  21. function redirectLink(domain) {
  22. return `https://dashboard.getorda.com/signup/?state=${domain}`;
  23. }

检查空字符串我没有工作

  1. function valInput() {
  2. if (input.value.length === 0){
  3. alert("need valid store URL")
  4. }
  5. }
vbkedwbf

vbkedwbf1#

在里面 myFunction 您可以在创建的新示例之后简单地添加此代码 FormData :

  1. if (formData.get("urlName") === "")
  2. return alert('asdsa')

它将停止整个功能,因为 return 并会提醒您尚未在输入框中输入任何内容。
实际上,整个代码有点错误
以下是javascript代码的正确版本:

  1. document.getElementById("url").addEventListener("submit", (event) => {
  2. event.preventDefault()
  3. let myForm = document.getElementById("url");
  4. let formData = new FormData(myForm);
  5. if (formData.get("urlName").length === 0)
  6. return alert('Provide valid url')
  7. EndOfUrl = sanitizeDomainInput(formData.get("urlName"));
  8. newUrl = redirectLink(EndOfUrl);
  9. window.location.href = newUrl;
  10. return false;
  11. });
  12. function sanitizeDomainInput(input) {
  13. input = input || 'unknown.com'
  14. if (input.startsWith('http://')) {
  15. input = input.substr(7)
  16. }
  17. if (input.startsWith('https://')) {
  18. input = input.substr(8)
  19. }
  20. var regexp = new RegExp(/^(([a-zA-Z]{1})|([a-zA-Z]{1}[a-zA-Z]{1})|([a-zA-Z]{1}[0-9]{1})|([0-9]{1}[a-zA-Z]{1})|([a-zA-Z0-9][a-zA-Z0-9-_]{1,61}[a-zA-Z0-9]))\.([a-zA-Z]{2,6}|[a-zA-Z0-9-]{2,30}\.[a-zA-Z]{2,3})$/)
  21. return regexp.test(input) ? input : 'unknown.com';
  22. }
  23. function redirectLink(domain) {
  24. return `https://dashboard.getorda.com/signup/?state=${domain}`;
  25. }

你打电话给 myFunction 两次,您甚至都不会避免发送表单,因此无论您在 myFunction .
在html中,您不需要按钮。你可以加上 input:submit 这将自动触发函数onclick。以下是正确的html代码:

  1. <form id="url">
  2. <input type="text" name="urlName">
  3. <input type="submit">
  4. </form>
展开查看全部
nx7onnlm

nx7onnlm2#

您可以将onblur处理程序添加到输入。

  1. function validate(val) {
  2. if(val.trim() === "") {
  3. alert("Field is required");
  4. }
  5. }
  1. <input type="text" name="urlName" onblur="validate(this.value)">

相关问题