javascript - 删除 http ://and www from form field while customer is typing, 并显示警报？

Question

我有一个表单，其中有一个字段(#domain)。

这里我希望客户添加自己的域名。我经常看到他们输入错误，即使说明很简短清晰。

为了使其更加用户友好，并避免错误 - 我想添加一个验证器或自动更正器。

这是一个 jquery 和 bootstrap 环境。

这是我现在制定的解决方案:

http://jsfiddle.net/Preben/ew1qoky9/1/

<form>
  <input placeholder="input your domain (WITHOUT http:// and www.)" class="form-control" name="domain" type="text" autocomplete="off" id="domain" style="max-width:320px">
</form>

和 JavaScript:

$('#domain').keypress(function (e) {
    var regex = new RegExp("^[a-zA-Z0-9\-_.]+$");
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (regex.test(str)) {
        return true;
    }

    e.preventDefault();
    return false;
});

这会动态删除所有特殊字符和空格。但没有告诉客户。

客户仍然输入http://和http://www 。 - 我也想自动删除这些。

我可以在正则表达式或 js 中添加一些内容来实现这一点吗？ - 或者建议的工作解决方案是什么？

如果客户输入特殊字符，是否有办法显示消息/警报？例如“请仅使用 a-z、0-9 和点。如果您的域有特殊字符，请输入您域名的 ACE 版本。” - 是 Bootstrap 警报，还是标准 js 警报？

PS:我发现了这个:Regex for dropping http:// and www. from URLs关于从网址中删除上述内容，但我不明白如何在我的代码中使用它。我非常感谢您的建议。请弹奏 fiddle :-)

Answer 1

根据您的代码，用户无法键入 :// 等特殊字符，但用户可以粘贴它。要处理此类情况，您可以在 blur 事件上验证它。以下是fiddle描绘相同。另外，我还添加了对“http”的简单检查，如果输入http，则会显示错误。您可以根据您的要求进行配置。

代码

(function() {
  var regex = new RegExp("^[a-zA-Z0-9\-_.]+$");
  $('#domain').keypress(function(e) {
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (regex.test(str)) {
      return true;
    }

    $("#lblError").text("Please use only a-z, 0-9 and dots.").fadeIn();

    e.preventDefault();
    return false;
  });

  $("#domain").on("blur", function(e) {
    var str = $(this).val();
    if (regex.test(str)) {
      if (str.indexOf("http") >= 0) {
        $("#lblError").text("Domain name cannot have HTTP in it.").fadeIn();
        return false;
      }
      $("#lblError").fadeOut();
    } else {
      $("#lblError").text("Please use only a-z, 0-9 and dots.").fadeIn();
      return false
    }
  });
})()

.error {
  color: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input placeholder="input your domain (WITHOUT http:// and www.)" class="form-control" name="domain" type="text" autocomplete="off" id="domain" style="max-width:320px">
  <p class="error" id="lblError"></p>
</form>