Let's Code
0%

JS實作- 表單驗證

Posted on Edited on In

觀察功能

  1. 製作一個會員申請的表單
    • 帳號
    • email
    • 密碼
  2. 輸入框的顏色變化
  3. 判斷條件的設置

任務拆解

抓出要互動的元素

1
2
3
4
5
const form = document.querySelector('#form');
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const password = document.querySelector('#password');
const password2 = document.querySelector('#password2');
  • 獲取物件層次中的父物件
  • 針對指定元素取得或設置指定的class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//show input error message
function showError(input, message) {
  const formControl = input.parentElement;
  formControl.className = 'form-control error';
}


form.addEventListener('submit', function (e) {
  e.preventDefault();
  if (username.value === '') {
    showError(username, 'Username is required');
  } else {
    showSuccess(username);
  }
})

1
2
const small = formControl.querySelector('small');
  small.innerText = 'Username is required';
  • 修改顯示文字

成功輸入

1
2
3
4
5
//show success outline
function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}

複製相同條件判斷

  • 事件為點擊送出之後，會進行條件判斷
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//event listener
form.addEventListener('submit', function (e) {
  e.preventDefault();

  if (username.value === '') {
    showError(username, 'Username is required');
  } else {
    showSuccess(username);
  };

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

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

  if (password2.value === '') {
    showError(password2, 'Password 2 is required');
  } else {
    showSuccess(password2);
  };
})

設定符合的驗證

  • email的輸入應有規範樣式
  • 使用正則表達式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//check email is valid
//js email regex
//https://ithelp.ithome.com.tw/articles/10094951

function isValiEmail(email) {
  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,}))$/;
  return re.test(String(email).toLowerCase());
}

//
 if (email.value === '') {
    showError(email, 'Email is required');
  } else if (!isValiEmail(email.value)) {
    showError(email, 'Email is not valid');
  }
  else {
    showSuccess(email);
  };

整合簡化 =>forEach

1
2
3
4
5
6
7
8
9
10
11
//Check required fields
function checkRequired(inputArr) {
  inputArr.forEach(function (input) {
    if (input.value.trim() === '') {
      showError(input, 'is required');
    } else {
      showSuccess(input);
    }
  });

}
  • 修改showError，套入名稱
1
2
3
if (input.value.trim() === '') {
      //console.log(input.id);//會顯示input的所有id
      showError(input, `${input.id}is required`);

將getFieldName() function拉出

  • 製作訊息的第一個字母大寫
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//Check required fields
function checkRequired(inputArr) {
  inputArr.forEach(function (input) {
    if (input.value.trim() === '') {
      //console.log(input.id);//會顯示input的所有id
      showError(input, `${getFieldName(input)} is required`);
    } else {
      showSuccess(input);
    }
  });

}


//getFieldName
function getFieldName(input) {
  return input.id.charAt(0).toUpperCase() + input.id.slice(1);
  //將第一個字charAt(0)，變大寫，並再接續後面的字slice(1)
}

長度檢查

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

密碼檢查

1
2
3
4
5
6
// check password match
function checkPasswordMatch(input1, input2) {
  if (input1.value !== input2.value) {
    showError(input2, 'Password do not match')
  }
}

參考資料：
JavaScript初學：DOM常用屬性與方法