<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form_Valid_JS</title>
</head>
<body>
<form name="form" id="form">
<label style="font-size:18px"><strong> Name</strong> </label><br><br><div id="error"> </div>
<input type="text" id="fname" name="fname" placeholder="First Name" pattern="[a-zA-Z\s]{0,10}" onBlur="fvalidity()" onFocus="Focus()">;
<input type="text" id="lname" name="lname" placeholder="Last Name" pattern="[a-zA-Z\s]{0,10}" onBlur="lvalidity()">
<input type="submit">
</form>
</body>
</html>
<script>
function fvalidity()
{
var txt="";
if( document.getElementById("fname").validity.patternMismatch)
{
txt="*Only Alphabet max 10 Characters.";
}
if(document.getElementById("fname").value=="")
{
txt="Field is Empty!!";
}
if(txt!="")
{
img();
var s=document.getElementById("error");
s.innerHTML=txt;
s.style.visibility="visible";
}
}
function img()
{
var sample=document.createElement("img");
var t= document.createAttribute("src");
t.value="../cross_script.png";
sample.setAttributeNode(t);
var id=document.createAttribute("id");
id.value="img";
sample.setAttributeNode(id);
document.getElementById("form").appendChild(sample);
}
</script>
我想在每个输入字段后动态放置一个图像以显示勾号或十字号。但是，当我这样做时，它会将图像放在提交按钮之后的最后一个位置，在每个输入字段之后动态放置图像的正确程序是什么。我的意思是我创建了一个函数，然后在进行验证时调用它。不是。我动态地制作元素和标签并在其上应用 Cs 并在每个输入字段之后显示在页面上。
最佳答案
在这种情况下，您需要将引用传递给输入字段，然后插入图像
function img(target) {
var sample = document.createElement("img");
sample.src = "../cross_script.png";
document.getElementById("form").appendChild(sample);
if (target.nextSibling) {
target.parentNode.insertBefore(sample, target.nextSibling)
} else {
target.parentNode.appendChild(sample)
}
}
然后
img(document.getElementById("fname"));
关于javascript - 如何通过 Javascript 动态放置图像元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32391703/