javascript - 验证链接的正则表达式

Question

我想验证我的输入框的 7 个首字母，我的代码不起作用。

<input type="text" value="www.example.com" id="txt_url"  
 onkeyup="if(!this.value.match(/^http\:\/\//) && (txt_url.lenght >= 7 )this.value='http://'+this.value" />

Answer 1

该代码不起作用的三个原因：

1. lenght应该是length。
2. txt_url.length应该是this.value.length。
3. 您在条件)结束时缺少关闭if。

工作版本：

<input type="text" value="www.example.com" id="txt_url"  
 onkeyup="if(!this.value.match(/^http\:\/\//) && (this.value.length >= 7))this.value='http://'+this.value" />

演示：http: //jsfiddle.net/J5Uxt/

Answer 2

您使用的函数中存在拼写错误。(txt_url.lenght)。

我相信它应该是 txt_url.length。此外，如果您想验证 url，网上有更好的正则表达式。

Answer 3

您更正的代码是

<input type="text" value="www.example.com" id="txt_url"
onkeyup="if(this.value.match(/^http\:\/\//)==null 
&& this.value.length>7)this.value='http://'+this.value;" />

但是，如果您想自动为 ab.com 等较短的域名添加 http:// 前缀，那么您可以使用

<input type="text" value="www.example.com" id="txt_url"
onkeyup="if(this.value.match(/^h(t(t(p(\:(\/(\/)?)?)?)?)?)?/)==null)
this.value='http://'+this.value;" />

Answer 4

• 避免内联（DOM 零）事件并集中处理此类事情
• 你有一个错字lenght。
• 您是否确定要在键入时执行此操作，而不是在模糊或表单提交时执行此操作？如果您每次按下键时都修改字段值，这肯定会让用户感到烦恼

下面假设模糊，但您可以将事件更改为您想要的任何内容：

jQuery：

$(function() {
    $('#text_url').on('blur', function() {
        if (!/https?:\/\//.test($(this).val()))
            $(this).val('http://'+$(this).val());
    });
});

原生 JS：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#text_url').addEventListener('blur', function() {
        if (!/https?:\/\//.test(this.value))
            this.value = 'http://'+this.value;
    }, false);
}, false);