Question

我尝试使用ajax验证表单...如果框通过了valdation，我可以显示交叉或勾号。这是通过显示或隐藏div标签来完成的，有一种更简单的方法，而不必为每个交叉放置一个div标签。勾选，因为这将使用大约20个div标签。

由于

Answer 1

您可以使用CSS :before属性执行此操作：

.tick:before {
    content:url(tick.gif);
}

.cross:before {
    content:url(cross.gif);
}

（你可能需要稍微调整一下CSS以使图像显示在正确的位置）

然后在您的javascript中，只需将课程tick或cross添加到您要在其旁边显示图片的每个文本框中。

Answer 2

由于您的验证取决于javascript，您最初可以将div保留在html之外，并在验证字段后插入它们。假设你的来源是这样的：

<p><input id="email" name="email" type="text" value="" /></p>

您的脚本可能类似于：

var emailField = document.getElementById('email');
if( isValid(emailField) ){
var tick = document.createElement('DIV');
tick.className = 'tick';
emailField.parentNode.appendChild(tick);
}else{
var cross= document.createElement('DIV');
cross.className = 'cross';
emailField.parentNode.appendChild(cross);
}

将“.tick”和“.cross”类添加到css并应用背景图像。当然，您需要检查元素是否已由先前的验证插入。这只是一个简单的例子。

这样你最初不需要额外的div。

在文本框旁边显示图像的简单方法？

2 个答案: