Question

我尝试通过鼠标在jquery中验证文本框，我的代码是通过任何鼠标输出运行意味着它显示输入有效的电子邮件。几次，我在文本框外单击的任何时候。这是我的代码：

$(document).ready(function() {
    $('#EmailAddress').focusout(function() {
        var email = $.trim($('#EmailAddress').val() || '');
        if (email.length == 0 || !emailregx.test(email)) {
            $(this).addClass('ChangetoYellow');
            $(this).after('<div class="Required">Enter valid Email.</div>');
            return false;
        } else {
            $(this).next(".Required").remove();
            $(this).removeClass('ChangetoYellow');
            return true;
        }
    });
});

当我的代码在document.ready之外时，我的代码无效。

这是我每次点击时运行时得到的结果：

Answer 1

$(this).after('<div class="Required">Enter valid Email.</div>');

这将在输入框中的每个焦点之后添加一个新的。

在文本框下方有一个占位符div。

<div id="emailErrorMsg"></div>

并做

$('#emailErrorMsg').html('Enter valid Email.');

这也可以让您添加更多错误消息。

Answer 2

在添加div之前删除div以防止重复。

$(document).ready(function() {
    $('#EmailAddress').focusout(function() {
        var email = $.trim($('#EmailAddress').val() || '');
        if (email.length == 0 || !emailregx.test(email)) {
            $(this).addClass('ChangetoYellow');
            if($(this).next().hasClass('Required'))
                $(this).next().remove();
            $(this).after('<div class="Required">Enter valid Email.</div>');
            return false;
        } else {
            $(this).next(".Required").remove();
            $(this).removeClass('ChangetoYellow');
            return true;
        }
    });
});

Answer 3

尝试此操作首先删除以前的错误消息并添加它。

JS

$(document).ready(function() {
   $('#EmailAddress').focusout(function() {
      var email = $.trim($('#EmailAddress').val() || '');
      if (email.length == 0  || !emailregx.test(email)) {
         $(this).parent().find(".Required").remove();
         $(this).addClass('ChangetoYellow');
         $(this).after('<div class="Required">Enter valid Email.</div>');
         return false;
      } else {
         $(this).parent().find(".Required").remove();
         $(this).removeClass('ChangetoYellow');
         return true;
     }
  });
});

对于简单示例小提琴（如果你想添加正则表达式并测试它） - http://jsbin.com/pujemay/edit?html,js,output

Answer 4

如果输入的值无效，我已经实现了一些代码来验证文本框并在元素后插入错误div。

我希望下面的代码可以解决您的问题

$(document).ready(function() {
    $('#EmailAddress').focusout(function() {
        var email = $.trim($('#EmailAddress').val() || '');
        if (email.length == 0 || !emailregx.test(email)) {
            var errorLabel = errorsFor(this);
            $(this).addClass('ChangetoYellow');
            if(errorLabel.length > 0){
            	$(errorLabel).show();
            }
            else {
	            $(this).after('<div for='+ this.name +' class="required">Enter valid Email.</div>');
            }
            return false;
        } else {
            $(this).next(".required").remove();
            $(this).removeClass('ChangetoYellow');
            return true;
        }
    });
  
  
    function errorsFor( element ) {
			var name = idOrName(element);
			return $('.required').filter(function() {
				return $(this).attr("for") === name;
			});
		};

    function idOrName( element ) {
	  return element.name ? element.name : element.id || element.name;
    };
});

Test sample code

Jquery focusout通过每次鼠标单击运行几次

4 个答案: