项目作者: cgh20xx

项目描述 :
form validator
高级语言: HTML
项目地址: git://github.com/cgh20xx/Validator.git
创建时间: 2018-09-06T07:25:25Z
项目社区:https://github.com/cgh20xx/Validator

开源协议:MIT License

下载


Validator

form validator

  • 增加最大字數規則(maxLength:number)
  • 一個欄位的錯誤訊息現在只會出現一次,依照填寫的 rule 順序判斷

Example

  1. <div>
  2. 姓名:<input id="txtName" type="text">
  3. </div>
  4. <div>
  5. 手機:<input id="txtPhone" type="tel">
  6. </div>
  7. <div>
  8. 電郵:<input id="txtEmail" type="text">
  9. </div>
  10. <div>
  11. 發票:<input id="txtInvoice" type="text">
  12. </div>
  13. <div>
  14. 身份証:<input id="txtId" type="text">
  15. </div>
  16. <div>
  17. <input id="cbAgree" type="checkbox">我已同意使用條款
  18. </div>
  19. <input id="btnSubmit" type="button" value="submit">
  20. <script src="js/Validator.js"></script>
  1. let btnSubmit = document.getElementById('btnSubmit');
  2. function checkForm() {
  3. let validator = new Validator();
  4. validator.add('#txtName', [
  5. {
  6. rule: 'require',
  7. errMsg: '請填寫姓名'
  8. },
  9. {
  10. rule: 'minLength:3',
  11. errMsg: '姓名長度不可小於3位'
  12. },
  13. {
  14. rule: 'maxLength:10',
  15. errMsg: '姓名長度不可大於10位'
  16. },
  17. ]);
  18. validator.add('#txtPhone', [
  19. {
  20. rule: 'require',
  21. errMsg: '請填寫手機'
  22. },
  23. {
  24. rule: 'mobile',
  25. errMsg: '請輸入正確手機格式 09開頭'
  26. },
  27. ]);
  28. validator.add('#txtEmail', [
  29. {
  30. rule: 'require',
  31. errMsg: '請填寫 email'
  32. },
  33. {
  34. rule: 'email',
  35. errMsg: '請輸入正確 email 格式 aa@bb.com'
  36. },
  37. ]);
  38. validator.add('#txtInvoice', [
  39. {
  40. rule: 'require',
  41. errMsg: '請填寫發票'
  42. },
  43. {
  44. rule: 'invoice',
  45. errMsg: '請輸入正確發票格式 AB12345678'
  46. },
  47. ]);
  48. validator.add('#txtId', [
  49. {
  50. rule: 'require',
  51. errMsg: '請填寫身份証'
  52. },
  53. {
  54. rule: 'twId',
  55. errMsg: '請輸入正確身份証格式 A123456789'
  56. },
  57. ]);
  58. validator.add('#cbAgree', [
  59. {
  60. rule: 'checked',
  61. errMsg: '請同意使用條款'
  62. }
  63. ]);
  64. let errMsgs = validator.start();
  65. return errMsgs;
  66. }
  67. btnSubmit.addEventListener('click', function(e) {
  68. let errMsgs = checkForm();
  69. if (errMsgs.length > 0) {
  70. alert(errMsgs.join('\n'));
  71. } else {
  72. alert('pass');
  73. }
  74. });