用于错误验证的 CSS 表单高亮显示

Question

http://www.hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial/ 我的一个网站上有这个表格，但他们制作这个表格的方式对我来说很复杂。我想知道当用户犯错时，是否有任何方法可以让输入框验证为红色。像这样的 http://jsfiddle.net/3UCbw/1/我只想在用户犯错时将框突出显示为红色，仅此而已。谢谢任何帮助，将不胜感激!

这是我要突出显示的代码。

div.highlight {
-webkit-box-shadow:5px 5px 5px black; 
-moz-box-shadow: 5px 5px 5px black; 
 box-shadow:5px 5px 5px black; 
 -webkit-box-shadow:0 0 15px red; 
 -moz-box-shadow: 0 0 15px red; 
 box-shadow:0 0 15px red; 
 } 

您可以在顶部的链接中查看表格! 也许在 jquery 中很容易突出显示框，谢谢!

Answer 1

$.fn.extend({
    ensure: function(regex, failClass){
        return this.each(function(){
            if(this.nodeName.toLowerCase() == "input"){
                $(this).change(function(){
                    var $input = $(this);
                    var val = $input.val().toUpperCase();                    
                    if(regex.test(val)){
                        $input.removeClass(failClass)
                    } else { 
                        $input.addClass(failClass);
                    }
                });
            }
        });
    }
});

var emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/
$('#email').ensure(emailRegex, 'error');

http://jsfiddle.net/CharlesTWall3/SFV3s/25/