css - 用于错误验证的 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/