Как я могу сделать проверку формы с помощью jQuery, используя значки в качестве индикаторов прохождения / неудачи?

Question

Как я могу выполнить проверку формы с помощью jQuery, чтобы разрешить зеленую галочку, если поле проходит через регулярное выражение, и красный х, если это не удалось?

Может ли кто-нибудь указать мне пример некоторого jQuery, который сразу показывает один значок, если поле проверяется, и другой, если он не работает?

Answer 1

Есть плагин jQuery Validation , который поддерживает подобные вещи. Взгляните на демонстрационную форму "Помни молоко"; у него есть немедленная обратная связь. Вы настроили параметр «success» в методе validate (), чтобы делать больше, чем просто предоставлять отрицательный отзыв.

Answer 2

Существует множество способов реализовать это. Вот один.

Соответствующий HTML будет выглядеть так:

<div><input type="text" id="myInput" /></div>

JQuery будет выглядеть примерно так:

// probably within your jQuery(document).ready(...) function:
// bind a change event handler to your input
jQuery("#myInput").bind("change", function(e) {

    var $this = jQuery(this);
    var re = /[a-z]/; // here's your regex
    var imgSrc = "blank.gif";

    if (re.test(jQuery(this).val())){
        // this is a successful match - green
        imgSrc = "green.gif";         
    } else {
       // this is not a match - red
       imgSrc = "red.gif";
    }

    // make sure we have an image before our input:
    if(!$this.prev().is("img")) { $this.before("img"); }

    // set the image to green
    $this.prev().attr("src", imgSrc);
});

Редактировать: исправление ошибки + комментарии

Answer 3

$(document).ready(AddValidation);

function AddValidation()
{
    $("#frmadminlogin").validate({
        'rules':{
            'txtadminemail':{'required':true, 'email':true},
            'txtadminpass':{'required':true}
        },
        'messages': {
            'txtadminemail':{'required':'<img title="Please enter login email." src="../images/error.gif" />', 'email':'<img title="Please enter valid email." src="../images/error.gif" />'},
            'txtadminpass':{'required':'<img title="Please enter login password." src="../images/error.gif" />'}
        }
    });
}