[英]Validating URL | Form not submitting?
目前在我的表單中,我有一個 type=text,但我試圖只接受表單的某個組件中的 url。
我嘗試了在網上找到的多種不同的正則表達式,但這也可能只是我的做法。 現在,我的表單甚至不會提交。 任何建議都是有幫助的。
注意:https://、http:// 均可接受。 當沒有提交有效的 url 時,我想在 HTML 中拋出我的錯誤消息。
HTML 表格:
<form method="POST" id="Submit">
<div class="inner-form">
<div class="input-field first-wrap">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z "></path>
</svg>
</div>
<input id="search" type="text" name="url" placeholder="Paste domain" required/>
</div>
<div class="input-field second-wrap">
<button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit">SEARCH </button>
</div>
</div>
<p id="errorMessage">Yikes! That's not a valid URL. .</p>
</form>
Javascript:
const form = document.querySelector("form");
const input = document.querySelector("input");
const button = document.querySelector("button");
const p = document.querySelector("p");
form.addEventListener("submit", (e) => {
e.preventDefault();
const regex = /^((https?:\/\/)?(www\.)?)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/;
let progress = 0;
const maxTime = 5000; // 5 seconds
let interval = null;
let form = document.querySelector('form')
function searchIt() {
let form = document.querySelector('form')
console.log(form)
form.addEventListener('submit', async(e) => {
// onclick or the event that start the call
interval = setInterval(() => {
progress = progress >= 100 ? 100 : progress + 1
document.getElementById('myprogress').style.width = `${progress}%`
// end interval and wait at 100%
if(progress == 100) clearInterval(interval);
}, maxTime/100)
document.getElementById('loadingcontainer').style.display = ""
e.preventDefault()
let urlIN = form.url.value
let url = encodeURIComponent(urlIN)
console.log(url)
try {
const data = await fetch('/result', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
url: url
})
}).then(res => {
//document.open()
res.text().then(function(text) {
console.log(text);
//document.write(text)
document.getElementById('result').innerHTML = text;
// Hide the progressbar, stop the timer and reset progress
clearInterval(interval);
progress = 0;
document.getElementById('myprogress').style.width = "0%"
document.getElementById('loadingcontainer').style.display = "none";
});
})
} catch (err) {
console.error(err)
}
})
}})
目前,我的控制台中出現錯誤:
Uncaught ReferenceError: searchIt is not defined
如果您要驗證是否有人輸入了有效的 URL,那么您不必編寫太多代碼的簡單方法就是使用輸入類型 URL,請看下面的示例:
<label for="url">Enter an https:// URL:</label>
<input type="url" name="url" id="url"
placeholder="https://example.com"
pattern="https://.*" size="30"
required>
鏈接Mozilla MDN的 Web 開發者文檔
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.