Question

我如何使用jQuery进行表单验证，以便在字段通过正则表达式时允许使用绿色复选标记，如果失败则使用红色x？

有人能指出一些jQuery的例子，如果一个字段验证会立即显示一个图标，如果它失败则会显示另一个图标吗？

Answer 1

有jQuery Validation plugin支持那种事情。看看“记住牛奶”演示表格;它有即时反馈。您可以在validate（）方法中设置“success”选项，而不仅仅是提供负面反馈。

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" />'}
        }
    });
}

如何使用图标作为通过/失败指示器使用jQuery进行表单验证？

3 个答案: