在电子邮件验证上使用jQuery更改框的颜色？

我有一个输入框，用于测试框中的电子邮件是否是有效的。这是脚本：在电子邮件验证上使用jQuery更改框的颜色？

$("#myform").validate({ 
    rules: { 
    field: { 
     required: true, 
     email: true 
    } 
    } 
});

这测试的电子邮件。我也有这个脚本，它会通过向表单添加另一个类来改变颜色。

$("#myform").toggleClass("othercolor");

我只是不知道在哪里把这个代码。对不起，刚接触jQuery的新问题。由于= d

来源

2012-04-28 Dragan Marjanovic

这一切都取决于当你想要的颜色来改变。这是什么？ – 2012-04-28 14:10:15

@DJ_Plus我希望在字段中的文本是有效的电子邮件时立即更改颜色。 – 2012-04-28 14:27:30

Here's a demo... (UPDATED)

它看起来像你可能会使用jQuery validation plugin。假设您是这样，您只需在页面加载时执行$("#myform").validate()即可初始化表单验证（例如，通过将其从$(document).ready()中调用）。

$(document).ready(function(){ 
    $("#myform").validate(); 
});

如果要在焦点离开电子邮件领域应用CSS类，你可以做这样的事情：

var validator = null; 
$(document).ready(function(){ 
    validator = $("#myform").validate({ 
     rules: { 
     cemail: { 
      required: true, 
      email: true 
     } 
     } 
    }); 


    $("#cemail").blur(function() { 
     if (validator.form()) { 
      $("#myform").addClass("othercolor"); 
     } 
     else { 
      $("#myform").removeClass("othercolor"); 
     } 
    }); 
});

validator.form()返回true，如果表单是有效的，如果不是，则为false。请注意.toggleclass（）不会在这里做你想要的;您需要根据validator.form()的返回值来添加或删除该类。

来源

2012-04-28 14:01:42

嘿谢谢这就是我所需要的只是不知道如何把它放在一起！ – 2012-04-29 01:42:54

好听！如果你将我的答案标记为选中，那将会很棒。 :-) – 2012-04-30 13:33:01

对不起，迟到了，忘了标记哈哈= P不知道StackOverflow有这样一个强大的社区，你从悉尼进出卧龙岗。 = d – 2012-04-30 13:42:16

你为什么不将其添加到成功回调jQuery中：

$("#myform").validate({ 
rules: { 
field: { 
    required: true, 
    email: true 
} 
}, 

success: function(){ 
$(this).toggleClass('red');  
} 

});

来源

2012-04-28 14:34:23

在电子邮件验证上使用jQuery更改框的颜色？

回答

相关问题