javascript Helpers paravalidaçãodeformulários
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript Helpers paravalidaçãodeformulários相关的知识,希望对你有一定的参考价值。
const {
addClass,
removeClass
} = require('./helpers');
// Método que converte uma string para minúsculo sem caracteres especiais
function regexStr(str, regexChain) {
const regexData = [{
pattern: "À",
result: "A"
},
{
pattern: "Á",
result: "A"
},
{
pattern: "Â",
result: "A"
},
{
pattern: "Ã",
result: "A"
},
{
pattern: "Ä",
result: "A"
},
{
pattern: "Å",
result: "A"
},
{
pattern: "Æ",
result: "AE"
},
{
pattern: "Ç",
result: "C"
},
{
pattern: "È",
result: "E"
},
{
pattern: "É",
result: "E"
},
{
pattern: "Ê",
result: "E"
},
{
pattern: "Ë",
result: "E"
},
{
pattern: "Ì",
result: "I"
},
{
pattern: "Í",
result: "I"
},
{
pattern: "Î",
result: "I"
},
{
pattern: "Ï",
result: "I"
},
{
pattern: "IJ",
result: "IJ"
},
{
pattern: "Ð",
result: "D"
},
{
pattern: "Ñ",
result: "N"
},
{
pattern: "Ò",
result: "O"
},
{
pattern: "Ó",
result: "O"
},
{
pattern: "Ô",
result: "O"
},
{
pattern: "Õ",
result: "O"
},
{
pattern: "Ö",
result: "O"
},
{
pattern: "Ø",
result: "O"
},
{
pattern: "Œ",
result: "OE"
},
{
pattern: "Þ",
result: "TH"
},
{
pattern: "Ù",
result: "U"
},
{
pattern: "Ú",
result: "U"
},
{
pattern: "Û",
result: "U"
},
{
pattern: "Ü",
result: "U"
},
{
pattern: "Ý",
result: "Y"
},
{
pattern: "Ÿ",
result: "Y"
},
{
pattern: "à",
result: "a"
},
{
pattern: "á",
result: "a"
},
{
pattern: "â",
result: "a"
},
{
pattern: "ã",
result: "a"
},
{
pattern: "ä",
result: "a"
},
{
pattern: "å",
result: "a"
},
{
pattern: "æ",
result: "ae"
},
{
pattern: "ç",
result: "c"
},
{
pattern: "è",
result: "e"
},
{
pattern: "é",
result: "e"
},
{
pattern: "ê",
result: "e"
},
{
pattern: "ë",
result: "e"
},
{
pattern: "ì",
result: "i"
},
{
pattern: "í",
result: "i"
},
{
pattern: "î",
result: "i"
},
{
pattern: "ï",
result: "i"
},
{
pattern: "ij",
result: "ij"
},
{
pattern: "ð",
result: "d"
},
{
pattern: "ñ",
result: "n"
},
{
pattern: "ò",
result: "o"
},
{
pattern: "ó",
result: "o"
},
{
pattern: "ô",
result: "o"
},
{
pattern: "õ",
result: "o"
},
{
pattern: "ö",
result: "o"
},
{
pattern: "ø",
result: "o"
},
{
pattern: "œ",
result: "oe"
},
{
pattern: "ß",
result: "ss"
},
{
pattern: "þ",
result: "th"
},
{
pattern: "ù",
result: "u"
},
{
pattern: "ú",
result: "u"
},
{
pattern: "û",
result: "u"
},
{
pattern: "ü",
result: "u"
},
{
pattern: "ý",
result: "y"
},
{
pattern: "ÿ",
result: "y"
},
{
pattern: "ff",
result: "ff"
},
{
pattern: "fi",
result: "fi"
},
{
pattern: "fl",
result: "fl"
},
{
pattern: "ffi",
result: "ffi"
},
{
pattern: "ffl",
result: "ffl"
},
{
pattern: "ſt",
result: "ft"
},
{
pattern: "st",
result: "st"
},
{
pattern: "´`·#¬\\/()=?¿¡!^[*\\]¨{}<>;,:.'\\-_\"’”“–—¹|»«",
result: ""
},
{
pattern: "aàáäâÀÁÄÂãÃ",
result: "a"
},
{
pattern: "eèéëêÈÉËÊ",
result: "e"
},
{
pattern: "iìíïîÌÍÏÎ",
result: "i"
},
{
pattern: "oòóöôÒÓÖÔõÕ",
result: "o"
},
{
pattern: "uùúüûÙÚÜÛ",
result: "u"
},
{
pattern: "çÇ",
result: "ç"
},
{
pattern: "2²",
result: 2
}
];
regexChain = regexChain != undefined ? regexChain : regexData
if (regexChain) {
let r = str.toLowerCase();
for (let i = 0; i < regexChain.length; i++) {
r = r.replace(new RegExp(`[${regexChain[i].pattern}]`, "g"), regexChain[i].result);
}
return r;
} else {
return str;
}
};
// Método que valida se um texto possui html, aspas, muitos espaços ou é vazio ou não atinge o minlenght
// Ele também retorna os erros e coloca um uma div especifica habilitando e desabilitando o botao do formulário
function checkStringInput(string, target, sendButton, classDisable, classEnable) {
// Regex caracteres HTML
let html = /(<([^>]+)>)/gi;
// Regex para aspas " e '
let quotes = /['"]+/g;
// Regex para espaços consecutivos
let spaces = /\s\s+/g;
if (string.match(html)) {
target.innerHTML = "";
removeClass(sendButton, classEnable);
sendButton.classList.contains(classDisable) ? '' : addClass(sendButton, classDisable);
let erro = "Não é permitido o envio de tags em HTML.";
target.innerHTML = chooseMessageType(erro, "danger");
} else if (string.match(quotes)) {
target.innerHTML = "";
removeClass(sendButton, classEnable);
sendButton.classList.contains(classDisable) ? '' : addClass(sendButton, classDisable);
let erro = "Não é permitido o envio de tags com aspas.";
target.innerHTML = chooseMessageType(erro, "danger");
} else if (string.match(spaces)) {
target.innerHTML = "";
removeClass(sendButton, classEnable);
sendButton.classList.contains(classDisable) ? '' : addClass(sendButton, classDisable);
let erro = "O texto digitado contém muitos espaços entre as palavras.";
target.innerHTML = chooseMessageType(erro, "danger");
} else if (string.length <= 0) {
target.innerHTML = "";
removeClass(sendButton, classEnable);
sendButton.classList.contains(classDisable) ? '' : addClass(sendButton, classDisable);
let erro = "Sua mensagem não pode estar vazia.";
target.innerHTML = chooseMessageType(erro, "warning");
} else if (string.length <= 4) {
target.innerHTML = "";
removeClass(sendButton, classEnable);
sendButton.classList.contains(classDisable) ? '' : addClass(sendButton, classDisable);
let erro = "Você precisa digitar um texto para enviar o formulário.";
target.innerHTML = chooseMessageType(erro, "warning");
} else {
target.innerHTML = "";
removeClass(sendButton, classDisable);
addClass(sendButton, classEnable);
}
}
// Método que retorna um template padrão de mensagens
// Type pode ser danger, warning, wait, loader, info e success
function chooseMessageType(erro, type) {
return `<div class="alert alert-xs alert-${type}">
<strong>Erro - </strong>${erro}
</div>`;
}
module.exports = {
regexStr,
checkStringInput,
chooseMessageType
};
以上是关于javascript Helpers paravalidaçãodeformulários的主要内容,如果未能解决你的问题,请参考以下文章
javascript ES6 Dom Helpers / Utilities Boilerplate(代替jQuery使用)
原生JavaScript实现对象的混合与克隆效果,带完整版解析代码[helpers.js]
原生JavaScript实现对象的混合与克隆效果,带完整版解析代码[helpers.js]