(Project) 重構以及進階表單驗證

延續上一份表單驗證筆記

重構是為了讓程式碼更加簡潔、可動性更高

先刪除這個攏長以及太多地方一樣的 if 判斷式

if(email.value===''){
    showError(email,'Email is required')
  }else{
    showSuccess(email);
  }
  if(password.value===''){
    showError(password,'Password is required')
  }else{
    showSuccess(password);
  }
  if(confirmPassword.value===''){
    showError(confirmPassword,'ConfirmPassword is required')
  }else{
    showSuccess(confirmPassword);
  }

更改為 function 將參數用陣列包裹著

• 建立新的 function 來執行

// Check require
const checkRequired = (inputArr=>{
    inputArr.forEach(input=>{
    console.log(input.value)
    })
})

checkRequired([username,email,password,confirmPassword])

• 在 input 內輸入任何文字，可以在 console 看到輸入的內容

實作避免使用者沒有輸入文字送出的警告文字

const checkRequired = (inputArr=>{
  inputArr.forEach((input=>{
//   trim() 為清除掉空格，使用者誤觸空格，可以避免掉存取資料
    if(input.value.trim()===''){
      showError(input,'is required')
    }else{
      showSuccess(input)
    }
  }))
})

實作將 is required (警告文字)前方加上，是哪一個填空尚未填入

const checkRequired = (inputArr=>{
  inputArr.forEach((input=>{
    if(input.value.trim() === '' ){
// 因為填空欄都已經綁上 html 標籤，直接取用 id 即可
// 使用 es6 語法`${} string`，快速完成字串加上變數
      showError(input,`${input.id} is required`)
    }else{
      showSuccess(input)
    }
  }))
})

為了讓警示文字更正是，實作讓他字首為大寫

// Check require
const checkRequired = (inputArr=>{
  inputArr.forEach((input=>{
    if(input.value.trim() === '' ){
      showError(input,`${getFiredName(input)} is required`)
    }else{
      showSuccess(input)
    }
  }))
})

// Get fieldname
const getFiredName = (input=>{
// 1. charAt() 語法意思為 取出原本字串的初始狀態，
//     Ex: BoY.charAt(0)='B' 大寫
//     Ex: BoY.charAt(1)='o' 小寫
//     Ex: BoY.charAt(3)='Y' 大寫
// 2. slice() 語法意思為拿掉第幾個值，回傳你一個'新的陣列'
//    slice(0,5) ## 含頭不含尾
//     Ex: BoY.slice(0)='oY' 大寫
//     Ex: BoY.slice(2)='Bo' 大寫
//     Ex: BoY.slice(0,2)='Bo' 大寫
// 3. toUpperCase()轉為大寫
//    toLowerCase()轉為小寫

/* charAt(0)將 id 的首字拿出並 toUpperCase()轉為大寫，
 * 加上 slice(1) 去掉第一個字，並且回傳新的陣列物件*/
  return input.id.charAt(0).toUpperCase()+input.id.slice(1);
})

實作檢查字數功能

// Check input length
const checkLength = ((input,min,max)=>{
  if (input.value.length < min ) {
    showError(input,`${getFiredName(input)} must be at least ${min}`)
  }else if (input.value.length > max) {
    showError(input,`${getFiredName(input)} must be less than ${max} characters`)
  }else{
    showSuccess(input)
  }
})

// Event Listener
form.addEventListener('submit',(e)=>{
  e.preventDefault();
  checkRequired([username,email,password,confirmPassword])
  checkLength(username,3,15)
  checkLength(password,6,25)
})

實作信箱確認，將原先的 isValidEmail() 刪除

// Check Email is valid
const checkEmail = (input=>{
  const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (re.test(input.value.trim())) {
    showSuccess(input)
  } else {
    showError(input, 'Email is not valid')
  }
})

// Event Listener
form.addEventListener('submit',(e)=>{
  e.preventDefault();
  checkRequired([username,email,password,confirmPassword])
  checkLength(username,3,15)
  checkLength(password,6,25)
  checkEmail(email)
})

實作密碼跟再次輸入密碼欄位是否符合

// Check passwords match
const checkPasswordsMatch = ((input1,input2)=>{
  if (input1.value !== input2.value) {
    showError(input2,'Passwords do not match')
  }
})

// Event Listener
form.addEventListener('submit',(e)=>{
  e.preventDefault();
  checkRequired([username,email,password,confirmPassword])
  checkLength(username,3,15)
  checkLength(password,6,25)
  checkEmail(email)
  checkPasswordsMatch(password,confirmPassword)
})