Ruby on rails 当电子邮件有效时，设计电子邮件\u字段边框颜色变化

使用带导轨的装置4

我希望我的email_字段有一个红色边框，直到用户输入有效格式的电子邮件，然后它将变为绿色

我很难找到这样做的文档，如果你能推荐最好的方法，那就太棒了

我目前的看法是：

<div class="form-group">
  <%= f.email_field :email, placeholder: 'Email', :autofocus => true, class: 'form-control' %>
</div>

---

如果已经有这方面的文件，你能告诉我这个方向吗。谢谢大家!

您需要使用Javascript在前端添加自定义验证。验证只需要在验证正确后将某个类添加到电子邮件字段。您可以使用以下正则表达式进行电子邮件验证。这只是一个示例，您应该查看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();">

以下是必要的CSS：

.invalid {
    border:1px solid red
}
.valid {
     border:1px solid green
}

---

这里有一个工作。

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

创建验证电子邮件的javascript函数。。。有关如何实现该功能，请参见本SO问题中的公认答案

然后更改电子邮件输入的类别，如果它是有效的，类似这样的事情（尽管未测试）

---

在css中为“有效”和“无效”类指定字段边框的颜色

今天晚些时候我有更多时间的时候会用背景色更新。为了让它在小提琴上工作，把“框架和扩展”从“OnLoad”改为“NoWrap In”，谢谢你，我的朋友！

function checkFilled() {
    var inputVal = document.getElementById("subEmail").value;
    if (validateEmail(inputVal)) {
        document.getElementById("subEmail").className = "valid"
    }
    else{
        document.getElementById("subEmail").className = "invalid"
    }
}
checkFilled();

.invalid {
    border:1px solid red
}
.valid {
     border:1px solid green
}

$( '#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');
  }
});