我有一个表单,其中有一个字段(#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 :-)
最佳答案
根据您的代码,用户无法键入 ://
等特殊字符,但用户可以粘贴它。要处理此类情况,您可以在 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>
关于javascript - 删除 http ://and www from form field while customer is typing, 并显示警报?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33565356/