spz-phonenumber 手机号输入框#

<spz-phonenumber
  layout="container"
  phone-pattern="[\+0-9\(\).\s-]+"
  default-country="CN"
  default-phone-code="86"
>
  <input
    id="email_or_phone"
    name="email_or_phone"
    type="text"
    required
    pattern="([a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)|([\+0-9\(\).\s-]+)"
  >
  <label for="email_or_phone">Email or Phone</label>
  <div validation-for="email_or_phone" visible-when-invalid="customError" hidden>Please enter a valid phone</div>
  <div validation-for="email_or_phone" visible-when-invalid="valueMissing" hidden>Enter a valid Email / phone number</div>

  <div role="phone-area" hidden>
    <div role="flag"></div>
    <select role="areacode">
      <option value="" disabled>*</option>
    </select>
  </div>
</spz-phonenumber>