twitter-bootstrap 引导电子邮件验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48192001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap email validation
提问by Pavel
I'm using Bootstrap to validate email address:
我正在使用 Bootstrap 来验证电子邮件地址：
<form id="..." novalidate>
...
<div class="form-group">
<input type="email" class="form-control" id="..." required/>
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
...
</form>
I'm using novalidateproperty to allow Bootstrap validate email itself. My HTML contains both Bootstrap CSS and JS refs. Everything works fine.
我正在使用novalidate属性来允许 Bootstrap 验证电子邮件本身。我的 HTML 包含 Bootstrap CSS 和 JS 参考。一切正常。
But I have couple of questions:
但我有几个问题：
- How bootstrap validates email regex? Where can I find code responsible for this (I've tried to look at srcs...)?
- Can I override regex that is used for validation (would be nice to do this without Bootstrap original code modification)?
- 引导程序如何验证电子邮件正则表达式？我在哪里可以找到对此负责的代码（我已经尝试查看 srcs ...）？
- 我可以覆盖用于验证的正则表达式吗（在没有 Bootstrap 原始代码修改的情况下这样做会很好）？
Thanks in advance.
提前致谢。
回答by AKNair
Its a late answer, but for those wants to know the answer for second question. Here is the sample code, I tried and was successful. Basically you can add "pattern" attribute to the input field.
这是一个迟到的答案，但对于那些想知道第二个问题答案的人来说。这是示例代码，我尝试并成功了。基本上您可以向输入字段添加“模式”属性。
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<form class="row position-relative flex-column needs-validation" novalidate>
<input type="email" name="email" placeholder="Your email ID.." class="email white col-7 col-md-4 col-lg-7 ml-3 form-control" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
<div class="valid-feedback feedback-pos">
Looks good!
</div>
<div class="invalid-feedback feedback-pos">
Please input valid email ID
</div>
<button type="submit" class="btn btn-danger text-uppercase sbmt-btn col-3 col-md-2 col-lg-4 ml-1" value="validate">Submit</button>
</form>