Javascript 使用自定义CSS | URL验证抛出我自己的验证消息

当提交非url时，我试图在HTML表单中呈现错误消息，因为我需要能够轻松地调整位置并应用CSS样式

我之所以要这样做，并不仅仅是使用

type=url

，因为我不喜欢标准的chrome验证错误消息，我想在我的表单下添加我自己的错误消息

当前，提交非url时没有显示错误消息，并且我的控制台中也没有错误。有什么想法吗

功能onInvalid（ev）{
ev.preventDefault（）；
document.getElementById（'errorMessage'）.innerText=“Yikes！那不是有效的URL”；
}

#错误消息{
显示：无；
颜色：#EB7051；
字体大小：15px；
}

搜寻
哎呀！这不是一个有效的URL

是<代码>显示：无是罪魁祸首。为了在提交有效url时隐藏错误消息，只需在输入有效时将

innterText

设置为空字符串（

'

）

以下是我的解决方案：

#错误信息{
颜色：#EB7051；
字体大小：15px；
}
搜寻

函数runValidation（）{
const inputEl=document.getElementById（'search'）；
const errorEl=document.getElementById（'errorMessage'）；
console.log（'验证输入值>>>'，inputEl.value）；
if（inputEl&&typeof inputEl.checkValidity==='function'）{
const isValid=inputEl.checkValidity（）；
log（'IsValid>>'，IsValid）；
errorEl.innerText=！isValid？“Yikes！这不是有效的URL”：“”；
返回false；
}
返回true；
}
功能搜索IT（ev）{
if（runValidation（））{
log（'Search it.>>'）；
}
}
功能onInvalid（ev）{
ev.preventDefault（）；
}

---

由于，

oninvalid

也仅在提交期间运行，因此最好创建自己的验证（我使用浏览器的本机验证程序进行

checkValidity

），并且仅在输入有效时执行提交操作（例如：调用API）。这样，您就可以更好地控制逻辑，如果您决定在输入发生变化时运行验证，您只需调用

runValidation

函数来处理

onkeypress

事件。

是<代码>显示：无是罪魁祸首。为了在提交有效url时隐藏错误消息，只需在输入有效时将

innterText

设置为空字符串（

'

）

以下是我的解决方案：

#错误信息{
颜色：#EB7051；
字体大小：15px；
}
搜寻

函数runValidation（）{
const inputEl=document.getElementById（'search'）；
const errorEl=document.getElementById（'errorMessage'）；
console.log（'验证输入值>>>'，inputEl.value）；
if（inputEl&&typeof inputEl.checkValidity==='function'）{
const isValid=inputEl.checkValidity（）；
log（'IsValid>>'，IsValid）；
errorEl.innerText=！isValid？“Yikes！这不是有效的URL”：“”；
返回false；
}
返回true；
}
功能搜索IT（ev）{
if（runValidation（））{
log（'Search it.>>'）；
}
}
功能onInvalid（ev）{
ev.preventDefault（）；
}

---

由于，

oninvalid

也仅在提交期间运行，因此最好创建自己的验证（我使用浏览器的本机验证程序进行

checkValidity

），并且仅在输入有效时执行提交操作（例如：调用API）。这样，您可以更好地控制逻辑，如果您决定在输入更改时运行验证，您可以调用

onkeypress

事件的

runValidation

函数。

@AlexanderChristophorov它嵌入到我的html文件中。不是通过stylesheet@AlexanderChristophorov它嵌入在我的html文件中。不是通过样式表，谢谢。。。它对你的有效，但对我的无效。你能复习一下吗？似乎我什么都没错过。。。您有2个

searchIt

功能。后一个写在我答案的上面。这就是为什么它不起作用的原因。我删除了第二个，并将剩余的代码集成到第一个代码中，但是运气不好，我最终再次收到了chrome验证。如果你能在这里帮忙，那就太棒了。很抱歉给您添麻烦……我猜您也已经从我的答案中删除了

onInvalid

功能。该函数中的

ev.preventDefault（）

阻止显示chrome验证。你能提供你的最终代码吗