当电子邮件有效时设计 email_field 边框颜色更改

Question

将 Devise 与 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

如果已经有这方面的文档，请您指出那个方向。谢谢！

Answer 1

您需要使用 Javascript 在前端添加自定义验证。一旦验证正确，验证只需要您将某个 class 添加到电子邮件字段。您可以使用以下正则表达式进行电子邮件验证。这只是一个示例，您应该查找 RFC 标准以查看有效的电子邮件并相应地修改正则表达式。

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();">

现在，我们需要一个函数从输入字段中获取值，使用我们的函数验证它，并将适当的 class 分配给该字段。

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
}

这是一个有效的 fiddle。

Answer 2

这不能在rails中完成，需要在javascript或jQuery中完成。

创建一个 javascript 函数来验证电子邮件...请参阅此 SO 问题中已接受的答案以了解如何制作该函数。

Validate email with jQuery

然后更改电子邮件输入的 class（如果有效），类似这样（虽然未经测试）...

$( '#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 中指定 'valid' 和 'invalid' class 字段边框的颜色。

当电子邮件有效时设计 email_field 边框颜色更改

Devise email_field border color changes when email valid

ruby-on-rails

ruby

ruby-on-rails-4

devise

email-validation