用于错误验证的CSS表单突出显示

时间:2013-05-07 19:54:57

标签: css forms validation highlight

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中很容易,只是为了突出显示框谢谢!

1 个答案:

答案 0 :(得分:0)

$.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/