spz-phonenumber 手机号输入框

• 需要使用带有国家旗子的选择列表来修改输入框的区号。
• 需要校验手机号是否合法。

• 必须有一个 input 子元素。
• 如果需要支持手机区号选择功能，必须有一个带有 role="phone-area" 属性的子元素，标识一个手机区号选择的根节点。
  • role="flag" 标识一个展示国旗的元素，当切换了不同国家区号，会自动修该元素的背景图片。
  • role="areacode" 标识一个手机区号选择器，组件会将手机区号数据加入当前元素。

<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>