为啥输入类型=“url”验证不起作用

Posted 2023-05-09

【中文标题】为啥输入类型=“url”验证不起作用

【英文标题】：Why input type="url" validation not working为什么输入类型=“url”验证不起作用

【发布时间】：2021-09-07 21:59:18

【问题描述】：

我希望在输入字段中只有 url 应该允许，所以我尝试将 type="url" 放在输入标签中，但它不起作用我可以找出阻止它工作的原因。 更重要的是，如果有人帮助我告诉他们任何方式，那么我只能在输入中允许 .com 后缀 url。

请帮帮我

window.addEventListener('load', ()  => 
  document.querySelector('button.test-btn').addEventListener('click', e => 
    document.querySelector('#test').innerhtml = '<h3>Please Wait...</h3>';
    setTimeout(yes, 7000)
  )
)

function yes() 
  var button = document.getElementById('test');
  var name = document.getElementById('name');
  var age = document.getElementById('age');
  var location = document.getElementById('location');
  var str = 'Hello! <p> My name is Ashish</p><p>How Are You: ' + name.value +
    '';
  document.getElementById('test').innerHTML = str;
;

<label>
    Your Name: 
    <input type="url" id="name" />
</label>
<br />
<button class='test-btn'>Test</button>
<p id="test"></p>

【问题讨论】：

验证由表单完成。您的标记中没有表单，因此没有验证。 -> <form validate><input type="url" name="url" /><button>Submit</button></form>

在使用表单标签时显示验证。但我想如果用户没有输入正确的类型（这里是 url），那么按钮将不会触发。并且可能由于 javascript 代码，警报正在显示，但同时按钮触发了应该阻止的调用功能

您必须调整您的脚本以使用<form>（例如，您现在想要表单的submit 事件而不是按钮的click 事件）但这是一个问题您首选的搜索提供商。

【参考方案1】：

这样

我禁用了测试按钮，如果 url 根据 HTML5 url 规则有效，则启用它

window.addEventListener('load', () => 


  document.getElementById('url').addEventListener("input", function(e) 
      document.getElementById('test1').disabled = !e.target.checkValidity();
  )

  document.querySelector('button.test-btn').addEventListener('click', e => 
    document.querySelector('#test').innerHTML = '<h3>Please Wait...</h3>';

    setTimeout(yes, 7000)
  )
)

function yes() 

  var name = document.getElementById('fullName');
  var url = document.getElementById('url');


  var location = document.getElementById('location');
  var str = 'Hello! <p> My name is Ashish</p><p>How Are You: ' + name.value +
    '';
  document.getElementById('test').innerHTML = str;
;

<label>
    Your Name: 
    <input type="text" id="fullName" />
</label>
<label>
    Your URL: 
    <input type="url" id="url" />
</label>
<br />
<button class='test-btn' id="test1" disabled>Test</button>
<p id="test"></p>

好的，提醒一下

window.addEventListener('load', () => 

document.querySelector('button.test-btn').addEventListener('click', e => 
  var url = document.getElementById('url');
  if (!url.value || !url.checkValidity()) 
    alert("Please enter valid URL");
    url.focus()
    return
  

    document.querySelector('#test').innerHTML = '<h3>Please Wait...</h3>';

    setTimeout(yes, 7000)
  )
)

function yes() 

  var name = document.getElementById('fullName');


  // var loc = document.getElementById('loc'); // location is reserved, but you do not have a location field
  var str = 'Hello! <p> My name is Ashish</p><p>How Are You: ' + name.value +
    '';
  document.getElementById('test').innerHTML = str;
;

<label>
    Your Name: 
    <input type="text" id="fullName" />
</label>
<label>
    Your URL: 
    <input type="url" id="url" />
</label>
<br />
<button class='test-btn' id="test1">Test</button>
<p id="test"></p>

【讨论】：

@Ashish 见第二版

【参考方案2】：

window.addEventListener('load', ()  => 
  document.querySelector('button.test-btn').addEventListener('click', e => 
    var name = document.getElementById('name').value;
  if (name.endsWith('.com'))
    document.querySelector('#test').innerHTML = '<h3>Please Wait...</h3>';
    setTimeout(yes, 7000);
  )
)

function yes() 
  var button = document.getElementById('test');
  var name = document.getElementById('name');
  var age = document.getElementById('age');
  var location = document.getElementById('location');
  var str = 'Hello! <p> My name is Ashish</p><p>How Are You: ' + name.value +
    '';
  document.getElementById('test').innerHTML = str;
;

<form>
<label>
    Your Name: 
    <input type="url" id="name" required />
</label>
<br />
<button class='test-btn'>Test</button>
<p id="test"></p>
</form>

【讨论】：

你测试你的答案了吗？我认为这不是 OP 想要的。