javascript - 提交图像表单验证

Question

$('#submit-img').on('click', function() {
    $('#img').attr('src', $('#url').val());     
});

function validate() {
    if ($('#img').attr('src') === '../static/img/placeholder.png'){
        return false;
    }
}

<form method="post" action="/{{ curr_user }}" enctype="multipart/form-data" onSubmit="return validate(this);" >
    <div class="imagey">
        <img id="img" src="../static/img/placeholder.png" onerror="this.src = '../static/img/placeholder.png'" alt="image" />
    </div>
    <span class="input-url">
         <input type="text" name = "url" id="url" placeholder="http://" maxlength="320"/>
    </span>
    <input type="submit" id="submit-img" name="op" value="Submit" class="form-submit"/>
</form>

此验证码对我不起作用。任何猜测为什么？

此外，如果将 validate 函数中的 if 语句替换为 justalert($('#img').attr('src'))

警报说Undefined

Answer 1

您的代码中有多个错误。

首先，这会在浏览器中创建无限循环的 404

<img id="img" src="../static/img/placeholder.png" onerror="this.src = '../static/img/placeholder.png'" alt="image" />

其次，它应该是 $('.submit-img')，而不是 $('#submit-img')，因为您设置了 class 属性，而不是 id 属性。

第三，您需要将 jQuery 代码包装到 $(document).ready(function() { ... });

修复后，代码在 jsfiddle 上适用于我

[编辑：]好的，可能这就是你要找的：

$(document).ready(function() {
    $('#url').on('keyup', function() {
        $('#img').attr('src', $('#url').val());
    });
});

当用户输入 URL 时，将显示图像。

jsfiddle 上的示例