ລະບົບ <input> pattern ຂອງ HTML

HTML <input> ບັນບາງinput

ການກໍານົດ ແລະ ການນໍາໃຊ້

pattern ລະບົບການກໍານົດ ການພິຈາລະນາອັບປະສັກວິທະຍາທາງ, ໃນຂະນະທີ່ກຳນົດຟອມຂໍ້ມູນ, ຈະກວດກາຄວາມທີ່ຢູ່ໃນບານຄົນເຂົ້າຫນັງຄວາມ <input>.

ຫັນໃສ່:pattern ລະບົບອາດສະພາບທີ່ຕິດຕາມຂອງບານຄົນເຂົ້າຫນັງຄວາມທີ່ຕ່າງໆນີ້:

  • ລະຫັດທີ່ມີຄວາມຈະນານາຊາຍ
  • ລະຫັດທີ່ວັດຖຸວັນທີ
  • ການຄົ້ນຫາ
  • ລະຫັດທາງອິນເຕີເນັດ
  • ລະຫັດໂທລະສັບ
  • ທີ່ຢູ່ອີເມວ
  • ລະຫັດສັບລະບຸລະບັນຊີ

ຄຳແນະນຳ:ໃຊ້ ລະບົບ title ທົ່ວໄປ ກ່າວຄວາມນີ້ເພື່ອຊ່ວຍຜູ້ນຳໃຊ້ຮູ້ຕົວກັບຮູບແບບນີ້.

ຄຳແນະນຳ:ກະລຸນາໃຫ້ພວກເຮົາບັນທຶກໃນ JavaScript ການສົນການ ຮຽນຫຼາຍກວ່າກ່ຽວກັບ ອັບປະສັກວິທະຍາທາງ ທີ່ມີຫຼາຍຫຼາຍຫນັງສະນວນຂອງພາສາຈີນ.

ຄວາມຈະນານາຊາຍ

ຕົວຢ່າງ 1

ມັນແມ່ນ HTML ຟອມຂໍ້ມູນທີ່ມີບາງບານຄົນເຂົ້າຫນັງຄວາມທີ່ສາມອັນຕາວັດຈະຕ້ອງມີພຽງສາມອັນຕາວັດ (ບໍ່ອາດມີໂຕນິຍົມຫຼືອັກສະນະພາສາ):

<form action="/action_page.php">
  <label for="country_code">ລະຫັດປະເທດ：</label>
  <input type="text" id="country_code" name="country_code"}
  pattern="[A-Za-z]{3}" title="ລະຫັດປະເທດສາມອັກສະນະ"><br><br>
  <input type="submit">
</form>

ການທົດລອງດຽວກັບເຈົ້າ:

ຕົວຢ່າງ 2

ພາຍໃຕ້ນີ້ແມ່ນ <input> ອັນໄດ້ມີລັກສະນະ 'password' ທີ່ຕ້ອງມີຄວາມປະສົມກັນຢ່າງໜ້ອຍ 8 ຄວາມ:

<form action="/action_page.php">
  <label for="pwd">ລະບຸສິນ：</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="8 ຄວາມຫຼືຫຼາຍກວ່າ"
  <input type="submit">
</form>

ການທົດລອງດຽວກັບເຈົ້າ:

ຕົວຢ່າງ 3

ພາຍໃຕ້ນີ້ແມ່ນ <input> ອັນໄດ້ມີລັກສະນະ 'password' ທີ່ຕ້ອງມີ 8 ຄວາມຫຼືຫຼາຍກວ່າ ແລະຕ້ອງມີໜຶ່ງເທື່ອຄວາມໂຕກັນ ໜຶ່ງເທື່ອຄວາມສະແດງສູງ ແລະອີກໜຶ່ງເທື່ອຄວາມສະແດງຕໍ່າ:

<form action="/action_page.php">
  <label for="pwd">ລະບຸສິນ：</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="ຕ້ອງມີຄວາມປະສົມກັນຢ່າງໜ້ອຍສອງຄວາມ ແລະໃນນັ້ນຕ້ອງມີໜຶ່ງເທື່ອຄວາມໂຕກັນ ໜຶ່ງເທື່ອຄວາມສະແດງສູງ ແລະອີກໜຶ່ງເທື່ອຄວາມສະແດງຕໍ່າ"
  <input type="submit">
</form>

ການທົດລອງດຽວກັບເຈົ້າ:

ຕົວຢ່າງ 4

ພາຍໃຕ້ນີ້ແມ່ນ <input> ອັນໄດ້ມີລັກສະນະ 'email' ທີ່ຕ້ອງເປັນຕາມຊັບສິນ: characters@characters.domain

ສະແດງໂດຍຄວາມສະແດງແລະ @ ຕໍ່ມາຈະມີຄວາມສະແດງອີກຫຼາຍຄວາມປະສົມກັນ ແລະຫຼັງຈາກນັ້ນແມ່ນ ຄວາມ ".". ພາຍໃຕ້ ຄວາມ "." ຕ້ອງມີຈຳນວນຄວາມຈາກ a ຫາ z ຢ່າງໜ້ອຍສອງຄວາມ:

<form action="/action_page.php">
  <label for="email">ອີເມວ：</label>
  <input type="email" id="email" name="email"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  <input type="submit">
</form>

ການທົດລອງດຽວກັບເຈົ້າ:

ຕົວຢ່າງ 5

ພາຍໃຕ້ນີ້ແມ່ນ <input> ອັນໄດ້ມີລັກສະນະ 'search' ທີ່ບໍ່ສາມາດມີຄວາມປະສົມກັນທີ່: ' ຫຼື "

<form action="/action_page.php">
  <label for="search">Search:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="ການເຂົ້າມາຜິດຫຼັກການ"
  <input type="submit">
</form>

ການທົດລອງດຽວກັບເຈົ້າ:

ຕົວຢ່າງ 6

ພາຍໃຕ້ນີ້ແມ່ນ <input> ອັນໄດ້ມີລັກສະນະ 'url' ທີ່ຕ້ອງເປັນ http:// ຫຼື https:// ແລະຫຼັງຈາກນັ້ນແມ່ນຄວາມປະສົມກັນຢ່າງໜ້ອຍຄັ້ງ:

<form action="/action_page.php">
  <label for="website">Homepage:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="包含 http://">
  <input type="submit">
</form>

ການທົດລອງດຽວກັບເຈົ້າ:

ກົດລະບຽບ:

<input pattern="regexp">

ຄວາມພິການອີງ:

ຄວາມພິການ: ຄວາມອະທິບາຍ:
regexp ກົດລະບຽບຂອງ ສະແນນກົດລະບຽບ HTML5 ສຳລັບຄຳນວນ <input>.

ການສະໜັບສະໜູນຈາກບັນດາບັນດາປະກອບອັນດັບ

ໂລກທີ່ຂອງຕາຕະລາງອອກສະຖານະທີ່ສະໜັບສະໜູນການນຳໃຊ້ຂອງປະກອບອັນດັບຄັດຄະແນນທີ່ສຸດຂອງປະກອບອັນດັບນັ້ນ.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 10.0 4.0 10.1 9.6

ຄວາມອະທິບາຍ:pattern ຂໍ້ອະທິບາຍ: ຄວາມພິການສະເພາະ HTML5.

HTML <input> ບັນບາງinput