以这个jsfiddle 演示示例为例,如何参考和指导添加效果和显示错误消息。
达到相同的效果,但错误消息验证没有,当插入重复标签或不允许的标签时,它显示相同的错误消息“无法添加重复标签”,现在删除标签时错误消息仍然没有消失。
完整代码运行:
https://jsfiddle.net/39m2nukg/
//var arr_db = [];
var arr_db = ["html", "css", "jquery", "javascript", "php"];
var usuario_tags = [];
$(function(){
$.ajax({
url: 'tags.php',
success: function(result) {
var returnedData = JSON.parse(result);
var total = returnedData.length;
for(var i = 0; i < total; i++) {
arr_db.push(returnedData[i]);
}
}
});
// ::: TAGS BOX
$("#tags input").on({
focusout : function() {
var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
var control = agregar_tags(txt.toLowerCase(), usuario_tags);
var verifica_tags = control_tags(txt.toLowerCase(), arr_db);
if(txt && control == false && verifica_tags == true) {
$('#message').hide();
$("<span/>",
{
text: txt.toLowerCase(),
insertBefore:this
});
} else {
$('#message').show();
}
this.value = "";
},
keyup : function(ev) {
// if: comma|enter (delimit more keyCodes with | pipe)
if(/(188|13)/.test(ev.which)) $(this).focusout();
}
});
$('#tags').on('click', 'span', function() {
$(this).remove();
quitar_tags(usuario_tags, $(this).text());
});
});
function agregar_tags(tag, arrtags) {
var index = -1;
var resultado = control_tags(tag, arrtags);
for(var i = 0; i < arrtags.length; i++) {
if(arrtags[i] === tag) {
index = i;
}
}
if(index > -1) {
arrtags[index] = tag;
} else {
arrtags.push(tag);
}
return resultado;
}
function control_tags(needle, haystack) {
var length = haystack.length;
for(var i = 0; i < length; i++) {
if(typeof haystack[i] == 'object') {
if(arrayCompare(haystack[i], needle)) return true;
} else {
if(haystack[i] == needle) return true;
}
}
return false;
}
function quitar_tags(array, element) {
const index = array.indexOf(element);
array.splice(index, 1);
}
#tags{float:left;border:1px solid #ccc;padding:5px;font-family:Arial;} #tags > span{cursor:pointer;display:block;float:left;color:#fff;background:#789;padding:5px;padding-right:25px;margin:4px;} #tags > span:hover{opacity:0.7;} #tags > span:after{position:absolute;content:"×";border:1px solid;padding:2px 5px;margin-left:3px;font-size:11px;} #tags > input{background:#eee;border:0;margin:4px;padding:7px;width:auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<label>Título<br/>
<input type="text" name="titulo" maxlength="255" />
</label><br/>
<label>Noticia<br/>
<textarea name="novedad"></textarea>
</label><br/><br/>
<div id="tags">
<input type="text" value="" placeholder="Add a tag" />
</div>
<p id="message" style="display:none">No se puede añadir una etiqueta duplicada.</p><br/><br/><br/>
<button type="submit">Publicar noticia</button>
</form>
我在代码中误用了参数或变量jQuery与 php 非常不同,您能否指导我正确应用这些错误消息时应该考虑什么。
如何正确地将这些错误消息应用到 jQuery 代码?
例子:
添加重复标签时显示错误消息。
尝试添加不允许的标签时显示错误消息,允许的标签取自此直接变量或数据库
var arr_db = [];
能源部。
首先,我邀请您使用更清晰的代码和更多的描述性变量,以使其更具可读性、简单性和有效性。这样,您不仅可以更轻松地知道错误在哪里,而且可以更好地控制代码,无论它有多大。开始使用风格指南可能是一个很好的步骤。
至于你想要做什么,在我看来,代码可以变得更简单。其基础可以是以下工作示例:
注意:要完成它,您唯一需要做的就是通过 ajax 在它们各自的方法中添加查询、添加和删除这些标签。
我留下了不使用jQuery制作的示例,它不像@MauroAguilarBustamante 的那样优雅,但它满足了所要求的功能。
我把我刚刚编程的功能的原型。
function esDuplicado(texto)
function esEtiquetaValida(texto,contiene)
function borrar(texto)
generarBaseDatos()
function agregarEtiqueta()
此外,状态消息已正确添加。
"Etiqueta duplicada."
"Listo."
"Escribiendo..."
"Etiqueta no válida."
结束代码:
PHP:这是您将其保存在单个记录中的方式:
JavaScript:试试下面的代码(只修改了Js),我已经建模这个遵循面向对象编程(OOP)范式,文档已经包含在代码中:
考虑到您不能通过邮寄方式将数组发送到 php,我想将其转换为 json 或用逗号分隔关键字,使用最后一个选项,还必须修改 PHP 并使用爆炸而不是内爆来分隔数组逗号,并在 php 中使用 foreach :
完整的 PHP 代码:
完整的 HTML 代码:
这解决了将数据发送到 php 以保存在数据库中。