Javascript <；img>；验证是否为img url

如何验证

“>

是否有效。每次我运行代码并输入非url图像时，它都会显示错误 asd:1获取<代码>file:///F:/Practice_site/htdocs/copy_html_activities/html_activities/activity%205/asd 0（）

请帮助我进行一些验证并消除错误

我的js:

function delete_row(no)
{

    document.getElementById("row"+no+"").outerHTML="";
}


function add_row()
{   
     var new_image=document.getElementById("new_image").value;
     var new_title=document.getElementById("new_title").value;
     var new_description=document.getElementById("new_description").value;
    if (new_image&&new_title&&new_description != "") {
         var table=document.getElementById("data_table");
         var table_len=(table.rows.length)-1;
         var row = table.insertRow(table_len).outerHTML=
         "<div id='row"+table_len+"'><div id='image_row"+table_len+"'><img src = "+new_image+"></div><div id='title_row"+table_len+"'>"+new_title+
         "</div><div id='age_row"+table_len+"'>"+new_description+"</div><div><input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></div></div>";

         document.getElementById("new_image").value="";
         document.getElementById("new_title").value="";
         document.getElementById("new_description").value="";
     }
}

function imgError(image) {
    image.onerror = "";
    image.src = "/images/no_photo.jpg";
    return true;
}

函数删除\行（否）
{
document.getElementById（“行”+no+”）.outerHTML=“”；
}
函数add_row（）
{   
var new_image=document.getElementById（“new_image”）.value；
var new_title=document.getElementById（“new_title”）.value；
var new_description=document.getElementById（“new_description”）.value；
如果（新图片和新标题和新描述！=“”）{
var table=document.getElementById（“数据表”）；
var table_len=（table.rows.length）-1；
变量行=table.insertRow（table_len）.outerHTML=
“”+新标题+
“+新描述+”；
document.getElementById（“新图像”）.value=“”；
document.getElementById（“新标题”）.value=“”；
document.getElementById（“新描述”）.value=“”；
}
}
函数imgError（图像）{
image.onerror=“”；
image.src=“/images/no_photo.jpg”；
返回true；
}

---

如果有人能帮我解决这个问题，我会很高兴的。非常感谢

您可以承诺检查图像是否有效：

function isValidImg( url ) {
    return new Promise( function ( resolve, reject ) {

        var image = new Image;

        image.onload = function ( ) { resolve( image ) };
        image.onerror = image.onabort = reject;

        image.src = url;
    } );
}

在您的代码中：

function add_row()
{   
    var new_image=document.getElementById("new_image").value;
    isValidImg(new_image)
    .then(function() {
        var new_title=document.getElementById("new_title").value;
        var new_description=document.getElementById("new_description").value;
        if (new_image&&new_title&&new_description != "") {
            var table=document.getElementById("data_table");
            var table_len=(table.rows.length)-1;
            var row = table.insertRow(table_len).outerHTML=
            "<div id='row"+table_len+"'><div id='image_row"+table_len+"'><img src = "+new_image+"></div><div id='title_row"+table_len+"'>"+new_title+
            "</div><div id='age_row"+table_len+"'>"+new_description+"</div><div><input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></div></div>";

            document.getElementById("new_image").value="";
            document.getElementById("new_title").value="";
            document.getElementById("new_description").value="";
        }
    })
    .catch(function() {
        alert('Error! Not a valid image.')
        // do what you need to do here if the image is not valid
    })
}

函数添加_行（）
{   
var new_image=document.getElementById（“new_image”）.value；
isValidImg（新图片）
.然后（函数（）{
var new_title=document.getElementById（“new_title”）.value；
var new_description=document.getElementById（“new_description”）.value；
如果（新图片和新标题和新描述！=“”）{
var table=document.getElementById（“数据表”）；
var table_len=（table.rows.length）-1；
变量行=table.insertRow（table_len）.outerHTML=
“”+新标题+
“+新描述+”；
document.getElementById（“新图像”）.value=“”；
document.getElementById（“新标题”）.value=“”；
document.getElementById（“新描述”）.value=“”；
}
})
.catch（函数（）{
警报（'错误！不是有效图像'）
//如果图像无效，请执行此处需要执行的操作
})
}

这个问题很模糊，我猜你使用的是香草ES5。 图像源应该是一个静态资源，或者，可以插入到动态的、服务器生成的图像的链接……但是它需要服务器协作才能做到这一点，这听起来像是您在这里只做客户端工作

第一件事：

HTMLImgElements没有值属性，因此：

var new_image=document.getElementById("new_image").value;

不会将任何内容分配给新的\u图像正确，它将保持未定义，除非您在代码中的其他地方分配了值属性及其值，但在本例中未显示

同样的道理也适用于

var new_description=document.getElementById("new_description").value;

通过查看您添加的代码，我看不到任何ID为“new_description”的元素，如果是这种情况，此行将产生类型错误：“cannotresolve value property of undefined”“。即使您确实有一个id为的元素，HTMLTextNodes也没有value属性，因此新的描述将保持未定义

基本上，这段代码是一团糟

另一件事是，您可能对javascript非常陌生，因为对于处理错误，您应该使用try-catch机制：

try{}catch(e){}then{}

所以你可以试试这样的东西：

function add_row()
{   
    try{


     var new_image=document.getElementById("new_image").value;
     var new_title=document.getElementById("new_title").value;
     var new_description=document.getElementById("new_description").value;
    if (new_image&&new_title&&new_description != "") {
         var table=document.getElementById("data_table");
         var table_len=(table.rows.length)-1;
         var row = table.insertRow(table_len).outerHTML=
         "<div id='row"+table_len+"'><div id='image_row"+table_len+"'><img src = 
         "+new_image+"></div><div id='title_row"+table_len+"'>"+new_title+
         "</div><div id='age_row"+table_len+"'>"+new_description+"</div><div><input 
         type='button' value='Delete' class='delete' 
         onclick='delete_row("+table_len+")'> 
          </div></div>";
           document.getElementById("new_image").value="";
         document.getElementById("new_title").value="";
         document.getElementById("new_description").value="";
  }
  catch(e){

  // YOUR ERROR IS HERE IN THE ERROR OBJECT OF e

  }   



  }

函数添加_行（）
{   
试一试{
var new_image=document.getElementById（“new_image”）.value；
var new_title=document.getElementById（“new_title”）.value；
var new_description=document.getElementById（“new_description”）.value；
如果（新图片和新标题和新描述！=“”）{
var table=document.getElementById（“数据表”）；
var table_len=（table.rows.length）-1；
变量行=table.insertRow（table_len）.outerHTML=
“”+新标题+
“”+新描述+“”
";
document.getElementById（“新图像”）.value=“”；
document.getElementById（“新标题”）.value=“”；
document.getElementById（“新描述”）.value=“”；
}
捕获（e）{
//您的错误在e的错误对象中
}   
}

为什么不使用本机的

try{}catch{}{}then{}

机制，它完全是为处理错误而构建的？Promise实际上使用

try{}catch{}then{}

在它的catch函数中。这段代码不是异步的，它基本上是逐行执行的，不需要等待，所以他为什么要使用承诺呢？@hazy你应该阅读我上面的评论。使用

试试{}catch{}，那么{}

就更优化了，这里不需要使用承诺，承诺是用于异步操作的，而这不是。