Question

我认为这很明显......

<script type="text/javascript">
$(document).ready(function(){

function textValidate(field) {
    $("field").blur(function(){
        var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
        if (f_name.value.length > 1 && f_name.value.match(alphaExp)) {
            document.getElementById(field+"_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";
        }
        else {
            document.getElementById(field+"_mark").innerHTML = "<img src='images/icons/cross.png' class='mark'>";
        }
    });
}

textValidate(#f_name);
textValidate(#l_name);

});
</script>

编辑：我的HTML ...

<p>First name</p>
<input type="text" id="f_name"> <span id="f_name_mark"></span>
<p>Last name</p>
<input type="text" id="l_name">  <span id="f_name_mark"></span>

我的目的是让<span>由十字架填充或相应地勾选。目前我没有得到任何改变，虽然我的工作不是一个功能而只是直接的代码应用于#f_name，如下所示：

<script type="text/javascript">
$(document).ready(function(){
    $("#f_name").blur(function(){
        var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
        if (f_name.value.length > 1 && f_name.value.match(alphaExp)) {
            document.getElementById("f_name_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";
        }
        else {
            document.getElementById("f_name_mark").innerHTML = "<img src='images/icons/cross.png' class='mark'>";
        }
    });
});
</script>

Answer 1

textValidate(#f_name);
textValidate(#l_name);

应该是

textValidate("#f_name");
textValidate("#l_name");

和

$("field").blur(function(){

应该是

$(field).blur(function(){

而且我不确定你从哪里得到变量f_name。

Answer 2

textValidate("#f_name");
textValidate("#l_name");

你还确定你需要＃？

Answer 3

我认为这里有一种类型：

    if (f_name.value.length > 1 && f_name.value.match(alphaExp)) {
        document.getElementById(field+"_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";
    }

应该是

    if (field.value.length > 1 && field.value.match(alphaExp)) {
        document.getElementById(field+"_mark").innerHTML = "<img src='images/icons/tick.png' class='mark'>";
    }

一个人在这里：

    $("field").blur(function(){

应该是

       $(field).blur(function(){

和

textValidate(#f_name);
textValidate(#l_name);

应该是

textValidate('#f_name');
textValidate('#l_name');

Answer 4

您无法在document.getElementById(id)

中使用CSS选择器

使用

$(field + "_mark").html("<img src='images/icons/tick.png' class='mark'>");

代替。

您的textValidate函数也必须带一个字符串：

textValidate("#f_name");
textValidate("#l_name");

而不是f_name.value你可能意味着（如果你不是仅为IE开发..）

$（ “＃f_name”）。VAL（）

或

$（场）.VAL（）

，不确定。

最后，您的<input>元素缺少其结束标记</input>。

Answer 5

在其他答案中，您使用的是期望#myId的jQuery选择器和期望myId的getElementById。预先填写英镑符号不会返回您要查找的元素。

Answer 6

以下是您的代码的略微修改版本：

$.fn.textValidate = function() {
    this.blur(function() {
        var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
        var mark = $(this).next('span');

        if ($(this).val().match(alphaExp))
            mark.html("<img src='images/icons/tick.png' class='mark'>");
        else
           mark.html("<img src='images/icons/cross.png' class='mark'>");
    });
}


$(document).ready(function() {  
    $('#f_name').textValidate();
    $('#l_name').textValidate();
});

但是，HTML的结构存在缺陷。编写所有内容的更好方法可以是here。

HTML

<label>First name
    <input type="text" id="f_name" />
    <img class="mark" />
</label>
<label>Last name
    <input type="text" id="l_name" />
    <img class="mark" />
</label>

的jQuery

$(document).ready(function() {
    $('#f_name, #l_name').blur(function() {
        var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
        var mark = $(this).next('.mark');

        if ($(this).val().match(alphaExp))
            mark.attr('src', 'images/icons/tick.png');
        else 
            mark.attr('src', 'images/icons/cross.png');
    });
});

Answer 7

使用jQuery Object调用jQuery blur函数。这意味着如果使用

调用它，函数将失败

textValidate(#f_name);

f_name既不是字符串也不是jQuery对象。为了解决您的问题，我了解您正在努力使您的功能尽可能通用，以便它可以应用于其他领域。试试这个：

function textValidate(field) {
    $(field).blur(function(){
        var value = $(field).val();
        var alphaExp = /^[a-zA-Z\sàèìòùáéíóúäëïöüñãõåæøâêîôû-]+$/;
        if (value.length > 1 && value.match(alphaExp)) {
            $(field+"_mark").html = "<img src='images/icons/tick.png' class='mark'>";
        }
        else {
            $(field+"_mark").html = "<img src='images/icons/cross.png' class='mark'>";
        }
    });
}

现在，要调用此函数，您只需要将css选择器作为参数传递：

textValidate("#f_name");

请注意，参数是一个字符串。而已。

我的Javascript / jQuery函数有什么问题？

7 个答案:

HTML

的jQuery