设计电子邮件有效时的email_field边框颜色更改
设计电子邮件有效时的email_field边框颜色更改
提问于 2015-05-23 21:13:33
与Rails 4一起使用设计
我希望我的email_field有一个红色边框，直到用户输入一个有效的格式的电子邮件，然后它将改为绿色。
我很难找到这样做的文档，所以如果你能推荐最好的方法，那就太棒了。
我目前的看法是：
<div class="form-group">
<%= f.email_field :email, placeholder: 'Email', :autofocus => true, class: 'form-control' %>
</div>user.rb：
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :trackable, :validatable, :omniauthable如果已经有这方面的文件，你能指出我的方向吗？谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-05-23 21:41:10
您需要使用Javascript在前端添加自定义验证。验证只要求您在验证正确后将某个类添加到电子邮件字段。您可以使用以下正则表达式进行电子邮件验证。这只是一个例子，您应该查阅RFC标准来查看有效的电子邮件并相应地修改regex。
function validateEmail(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return re.test(email);
}为了方便起见，我们假设文本字段如下所示：
<input type="text" id="subEmail" onchange="checkFilled();">现在，我们需要一个函数，该函数从输入字段获取值，使用我们的函数验证它，并将适当的类分配给该字段。
function checkFilled() {
var inputVal = document.getElementById("subEmail").value;
if (validateEmail(inputVal)) {
document.getElementById("subEmail").className = "valid"
}
else{
document.getElementById("subEmail").className = "invalid"
}
}
checkFilled();下面是必要的CSS：
.invalid {
border:1px solid red
}
.valid {
border:1px solid green
}这是一个工作的小提琴。
Stack Overflow用户
发布于 2015-05-23 22:01:16
这不能在rails中完成，需要在javascript或jQuery中完成。
创建一个javascript函数来验证电子邮件..。关于如何实现这个函数，请参见本文中被接受的答案。
然后更改电子邮件输入的类，如果它是有效的，如下所示(但未经测试).
$( '#user_email_field' ).bind('input', function() {
if ( validateEmail( $( '#user_email_field' ).value ) ) {
$( "#user_email_field" ).addClass('valid').removeClass('invalid');
}
else {
$( "#user_email_field" ).removeClass('valid').addClass('invalid');
}
});在css中为“有效”和“无效”类指定字段边框的颜色。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30417662
复制相关文章
相似问题
腾讯云开发者
