Question

我有一个输入字段，它将记录最终用户的响应。说它的标签是Linkedin URL。必须输入linkedin URL的用户可以输入其他输入（facebook.com/satyaram2k14），这不是无效的。因此，如何检查输入的网址是否包含字符串'linkedin.com'和其他文本。最终网址应为“ linkedin.com/satyaram2k14”。如何在前端检查这种模式。

Answer 1

您可以采用几种方法：

依靠通过required和pattern属性的HTML5表单验证
在表单验证中通过JavaScript验证输入值
（可选）提供有关字段内容（无效）状态的视觉提示

HTML5验证可在任何现代浏览器中使用，并集成到浏览器UI（包括错误消息的本地化）中。但是它不那么灵活，当模式不匹配时给出的错误消息的帮助因浏览器而异。

无论如何，您还应该始终在服务器端验证用户输入，因为可以绕过任何客户端验证。

以下是这三种方法的一些代码示例。它们都使用RegEx模式^https?://(www\.)?linkedin\.com，因此它们将允许带有或不带有“ www。”的http或https协议和url。

var form = document.getElementById('form');
var field = document.getElementById('url');
var fieldstatus = document.getElementById('fieldstatus');
var regExPattern = new RegExp('^https?://(www\.)?linkedin\.com', 'i');

// validation on form submit
form.addEventListener('submit', function(ev) {
  if (!regExPattern.test(field.value)) {
    ev.preventDefault();
    alert('The input value does not match the pattern!');
  }
});

// validation on input
field.addEventListener('input', function() {
  if (!regExPattern.test(field.value)) {
    fieldstatus.innerHTML = 'invalid';
  } else {
    fieldstatus.innerHTML = 'valid';
  }
});

<h1>HTML5 validation pattern</h1>
<form>
<input type="text" pattern="^https?://(www\.)?linkedin\.com" required /><br>
<input type="submit" />
</form>

<h1>Custom JavaScript validation</h1>
<form id="form">
<input type="text" id="url" /> <span id="fieldstatus">invalid</span><br>
<input type="submit" />
</form>

Answer 2

一种快速的实现方法是使用back02-03的{{1}}属性，如下所示：

pattern

input是一个正则表达式，它匹配以<input type='text' pattern='^linkedin\.com/'>开头的所有字符串。

使用此属性，浏览器本身将仅接受此类字符串。

HTML输入必须包含特定的字符串

2 个答案: