表单验证 - 必须包含列表中的特定单词

Question

我正在尝试使用 Javascript 验证输入字段是否具有以下特定格式：

“WORD1,WORD2”

所以两个词之间必须有一个逗号，没有空格。 WORD1 可以是任何单词，但 WORD2 必须是以下列表中的单词：

“USD”、“AUD”、“BTC”、“CAD”、“CHF”、“EUR”、“GBP”、“ETH”、“JPY”、“NZD”

如果输入域中没有WORD2中的任何单词，则验证将失败。例如：“ASDA,USD”将被视为有效且没有问题。但是，“ASDA,ASD”将被视为无效。

我该如何编程呢？这是我到目前为止的大写验证。

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="e.g. 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>

Answer 1

而不是在非常高的水平上使用 javascript；在基本级别使用正则表达式。

正则表达式用于匹配字符串和验证。

让我解释一下我创建的正则表达式

let regex = /([a-zA-Z]+),(USD|AUD|BTC|CAD|CHF|EUR|GBP|ETH|JPY|NZD|)$/;

()表示分组 [a-zA-Z] 代表任何字母表（大写字母或小写字母） +代表不止一个 |代表备选

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("");
}

Answer 2

使用一个Select

（修改代码以允许任何文本前缀）

Selects 通常用于将选项限制为一组已定义的值。这避免了解析和验证用户输入的不必要的复杂性。因此，在此解决方案中，“word2”已成为 <select>，其中包含货币缩写列表。

文本前缀或“word1”是具有模式属性的输入。该模式允许 1-5 个字母不带空格，但这可以根据需要进行修改。用户输入由代码使用 checkValidity 验证，然后转换为大写。

验证后，代码returns一个字符串：word1,word2

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>

表单验证 - 必须包含列表中的特定单词

Form validation - Must contain a specific word from a list

javascript

html

css

forms

validation