Javascript 验证仅接受 utf-8 字符

Question

我有一个表单，我希望该表单的输入字段只接受 UTF-8 字符。我不知道如何实现这一点。以下是我的 html 表单。任何帮助！提前致谢..

<form action="" method="post" id="myform">              

<fieldset id="address">
    <div class="required">
        <label for="firstName">
            <span class="required-indicator">* </span>
            <span>First Name</span>
        </label>
        <input class="input-text required" id="firstName" type="text" name="billto_firstname" value="" maxlength="50">
    </div>

    <div class="required">
        <label for="lastName">
            <span class="required-indicator">* </span>
            <span>Last Name</span>
        </label>

        <input class="input-text required" id="lastName" type="text" name="billto_lastname" value="" maxlength="50">
    </div>

    <div class="required">
        <label for="address1">
            <span class="required-indicator">* </span>
            <span>Address 1</span>
        </label>

        <input class="required" id="address1" type="text" name="billto_address1" value="" maxlength="50">
    </div>
</fieldset>

<fieldset>
    <div class="row-button">
        <button class="continue-button" type="submit" name="submit-form" onclick="this.submit()" value="Continue"><span>Continue </span></button>
    </div>              
</fieldset>
</form>

Answer 1

您可以将验证添加到所有文本字段：

/* When all the elements of the page are loaded */
document.addEventListener('DOMContentLoaded', function() {
  /* Regular expression to test if a string has only UTF-8 characters */
  var utf8 = /([\x00-\x7F]|([\xC2-\xDF]|\xE0[\xA0-\xBF]|\xED[\x80-\x9F]|(|[\xE1-\xEC]|[\xEE-\xEF]|\xF0[\x90-\xBF]|\xF4[\x80-\x8F]|[\xF1-\xF3][\x80-\xBF])[\x80-\xBF])[\x80-\xBF])*/g;

  /* Add the 'submit' event handler to the form */
  document.getElementById('myform').addEventListener('submit', function() {
    /* Get all the textfields */
    var txts = document.querySelectorAll('input[type=text]');

    /* Loop through them */
    for (var i = 0; i < txts.length; i++) {
      /* Look if it has only utf-8 characters */
      if (txts[i].value !== txts[i].value.match(utf8)[0]) {
        alert('The field should have only UTF-8 characters');
        break;
      }
    }
  });
});

<form action="" method="post" id="myform">

  <fieldset id="address">
    <div class="required">
      <label for="firstName">
        <span class="required-indicator">* </span>
        <span>First Name</span>
      </label>
      <input class="input-text required" id="firstName" type="text" name="billto_firstname" value="" maxlength="50">
    </div>

    <div class="required">
      <label for="lastName">
        <span class="required-indicator">* </span>
        <span>Last Name</span>
      </label>

      <input class="input-text required" id="lastName" type="text" name="billto_lastname" value="" maxlength="50">
    </div>

    <div class="required">
      <label for="address1">
        <span class="required-indicator">* </span>
        <span>Address 1</span>
      </label>

      <input class="required" id="address1" type="text" name="billto_address1" value="" maxlength="50">
    </div>
  </fieldset>

  <fieldset>
    <div class="row-button">
      <button class="continue-button" type="submit" name="submit-form" onclick="this.submit()" value="Continue"><span>Continue </span>
      </button>
    </div>
  </fieldset>
</form>