Estoy tratando de usar Javascript para validar un campo de entrada para que tenga el formato específico a continuación:
Así que tiene que haber una coma entre dos palabras, sin espacios . WORD1 puede ser cualquier palabra, pero WORD2 tiene que ser una palabra de la siguiente lista:
Si el campo de entrada no tiene ninguna de las palabras en WORD2, la validación fallará. Por ejemplo: "ASDA,USD" se consideraría válido y no tendría problemas. Sin embargo, "ASDA,ASD" se consideraría inválido.
¿Cómo puedo programar esto? Esto es lo que tengo hasta ahora para la validación de mayúsculas.
JavaScript
function cryptoValidate() { var cryptoBaseCurrencies = ("USD", "AUD", "BTC", "CAD", "CHF", "EUR", "GBP", "ETH", "JPY", "NZD"); let x = document.getElementById("inputText4").value; let text; if (x.toUpperCase() != x) { document.getElementById('demo2').style.display = "block"; text = "Crypto and base must be uppercase"; document.getElementById("inputText4").value = ''; } else if WORD FORMATTING HERE { document.getElementById('demo2').style.display = "block"; text = "Missing the correct base currency" document.getElementById("inputText4").value = ''; } else { text = "Input OK"; document.getElementById('demo2').style.display = "none"; } document.getElementById("demo2").innerHTML = text; }HTML
<div class="col-auto"> <input type="text" id="inputText4" class="form-control" aria-describedby="TextHelpInline" placeholder="eg BTC,USD"/> </div> <div class="col-auto"> <button id="inputTextBtn4" class="btn set-btn" onclick="cryptoValidate()">Add</button> </div> <p id="demo2" style="display: none"></p>Usar una selección
(código revisado para permitir cualquier prefijo de texto)
Las selecciones se utilizan normalmente para limitar las opciones a un conjunto definido de valores. Esto evita la complejidad innecesaria de analizar y validar la entrada del usuario. Entonces, en esta solución, "word2" se ha convertido en <select> con una lista de abreviaturas de monedas.
El prefijo de texto, o "palabra1", es una entrada con un atributo de patrón. El patrón permite de 1 a 5 letras sin espacios, pero esto podría modificarse según sea necesario. La entrada del usuario se valida mediante código usando checkValidity y luego se convierte a mayúsculas.
Una vez validado, el código devuelve una cadena de: palabra1, palabra2
rate.addEventListener("change", e => { let el = rate.querySelector("input"); if (el.checkValidity()) { let word1 = el.value.toUpperCase(); let word2 = rate.querySelector("option:checked").value; console.log("You selected: ", word1 + "," + word2); // do something } else { console.log("Invalid input"); } }); body { font-family: sans-serif; padding: 1em; } #rate input:invalid ~ span:after { content: "Please enter 1-5 characters without spaces"; color: red; display: block; font-size: 0.8rem; } <span id="rate"> <input type="text" pattern="[A-Za-z]{1,5}" spellcheck=false placeholder="enter prefix"> <select> <option>USD</option> <option>AUD</option> <option>BTC</option> <option>CAD</option> <option>CHF</option> <option>EUR</option> <option selected>GBP</option> <option>ETH</option> <option>JPY</option> <option>NZD</option> </select> <span></span> </span>En lugar de usar javascript a un nivel muy alto; Usa expresiones regulares a nivel básico.
La expresión regular se usa para hacer coincidir cadenas y validación.
déjame explicarte la expresión regular que creé.
let regex = /([a-zA-Z]+),(USD|AUD|BTC|CAD|CHF|EUR|GBP|ETH|JPY|NZD|)$/; () representa agrupación [a-zA-Z] representa cualquier alfabeto (mayúsculas o minúsculas) + representa más de uno | representa alternativa
let regex = /([a-zA-Z]+),(USD|AUD|BTC|CAD|CHF|EUR|GBP|ETH|JPY|NZD|)$/; let str = "Iamanexamplestring,BTC"; // let result = regex.test(str); if(result) { console.log("👍"); } else { console.log("👎"); }