提交图像表单验证

Submit Image Form Validation

本文关键字：验证 表单 图像 提交      更新时间：2023-09-26
$('#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语句替换为alert($('#img').attr('src'))

警报显示Undefined

你的代码中有多个错误。

首先这会在浏览器中创建一个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

示例
相关文章：