Question

我创建了一个用户个人资料，其中用户只能添加LinkedIn URL

我尝试过

pattern="^http(s)?:\/\/(www)?\.linkedin\.com\/in\/.*$";

html中的

正则表达式，但它限制了所有内容。我还在js中添加了用户链接，仅链接链接除外。但是如果我输入abc_name，它将显示

https://www.linkedin.com/in/abcname

但是如果我输入https://www.google.com，则它会准确显示网址。

html：

<input type="text" class="user-linkedin" id="user-linkedin" placeholder="LinkedIn Profile ID">

js：

userDetails.linkedin = 'http://www.linkedin.com/in/' + userDetails.linkedin.replace('http://www.linkedin.com/in/', '').replace('https://www.linkedin.com/in/','');

$(subpage.selector + ' .user-linkedin').val(userDetails.linkedin);
$(subpage.selector + ' .linkedin-link').attr('href',userDetails.linkedin);

Answer 1

如果我正确理解了您的要求，并且您需要一个正则表达式来仅匹配个人资料链接中的链接，则以下内容应该可以满足您的需求：

^http(s)?:\/\/(www\.)?linkedin\.com\/in\/.*$

<form>
  <input pattern="^http(s)?:\/\/(www\.)?linkedin\.com\/in\/.*$" />
  <button>Submit</button>
</form>

如果您需要检查输入是否为有效链接，并使用Jquery将其插入DOM中的某个位置，则可以执行以下操作：

$(".user-linkedin").on('input', function(event) {
  var validLink = /^http(s)?:\/\/(www\.)?linkedin\.com\/in\/.*$/.test(event.target.value)
    ? event.target.value
    : '';
  $(".linkedin-link")
    .text(validLink || 'invalid link')
    .attr("href", validLink);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="user-linkedin" />
<br>
Link: <a href="" class="linkedin-link"></a>

如何限制我的网址仅接受链接N链接作为输入

1 个答案: