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

时间:2011-08-02 17:41:20

标签: javascript jquery function

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

<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>

7 个答案:

答案 0 :(得分:4)

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

应该是

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

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

应该是

$(field).blur(function(){

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

答案 1 :(得分:0)

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

你还确定你需要#?

答案 2 :(得分:0)

我认为这里有一种类型:

    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');

答案 3 :(得分:0)

您无法在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>

答案 4 :(得分:0)

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

答案 5 :(得分:0)

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

$.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');
    });
});

答案 6 :(得分:0)

使用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");

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