在不使用 required 的情况下显示验证消息答案

【问题标题】：Show validation message without using required在不使用 required 的情况下显示验证消息
【发布时间】：2017-10-03 06:36:22
【问题描述】：

我只想在用户在输入字段中键入内容时显示验证消息。我无法在输入框中输入 required。

<input type="url" class="form-control" name="website_url">

输入数据应该是有效的网站 URL。

我可以在不使用 Jquery 或 Javascript 的情况下做到这一点吗？

【问题讨论】：

您可以在将表单发布到服务器之前通过java脚本实现。
你可以，请查看this
我在 HTML5 中找到了用于验证文本区域长度的模式。所以我在 HTML 中寻找类似的东西。

标签： html validation

【解决方案1】：

你可以像这样通过javascript来实现。

<!DOCTYPE html>
<html>
<body>

Enter your url: <input type="text" id="url" onfocusout="myFunction()">



<script>
function myFunction() {
    var x = document.getElementById("url");
    var re = //use valid regex here;
if (!re.test(url)) { 
    alert("url error");
    return false;
}

}
</script>

</body>
</html>

您必须对 url 使用有效的正则表达式，例如 this

但我更喜欢进行服务器端验证，以防 javascript 关闭。

【讨论】：

提供所需的准确正则表达式，而不是转发到另一个链接！
我提供了一个链接。
附加正则表达式而不是转发到另一个链接并使用 sn-p 更新您的答案。让人们很容易理解。
感谢您的回答。但我正在寻找单行解决方案。我不想使用 Javascript 或 Jquery。
然后你可以指定 type="url" 这样w3schools.com/html/html_form_input_types.asp