# JS_練習_登入頁面

製作一個登入頁面，讓使用者得以輸入個人資訊，並設定輸入條件，像是：
- 若使用者尚未輸入任何資訊或是輸入條件不符，輸入欄出現警示紅框
- 在信箱部分只能輸入信箱資料
- 在使用者名稱或密碼設定輸入字數條件

## HTML
1. 可以使用vscode快捷鍵 `cmd +d` 選取下一個相同的字。
2. 使用bootstraps設定容器，使容器可以隨著螢幕伸縮改變，呈現RWD的效果
## CSS
1. `visibility` 屬性：
- visable : 產生的 box 是可見的
- none : 產生的 box 是不可見的讓元素/物件隱藏起來
- 與display:none 最大差別是，D-N是整個屬性關閉
2. :root
- 使用：root設定顏色變數，在做顏色調用時可以直接輸入變數取用

:root{
    --success-color:#2ecc71;
    --error-color: #e74c3c;
}
/*----取用時----*/
h1{
color: var(--success-color)
}

## JS

1. 先宣告變數，利用getElementById取得元素
2. 加入Eventlistener事件監聽

註冊一個`submit`事件，
這邊的`e.preventDefault();`是用來停止預設的submit這個行為：

// Eventlistener
form.addEventListener('submit', function(e) { //註冊事件
    e.preventDefault();                       //停止預設行為
}) 

並在事件裡導入判斷函式showSuccess()/ showError()
### showError功能
- 當輸入條件不符合時，設定的tag `<small>`會顯示出錯誤訊息
- 利用元素.className方法，加入`form-group error`屬性，帶入css，使輸入匡變成紅色。
### showSuccess功能
- 沒有錯誤訊息，將class名稱改成`form-group success`來讓css可以正確將輸入框顯示綠色。
### checkRequired功能

#### getFieldName
返回將輸入的id資訊，第一個字母變成大寫。
- `charAt(0)`回傳第０個值，再加上後面的小寫字元
- `slice([begin, end])`回傳陣列，可選澤從開始到結束的值。
- 判斷判斷式是否輸入正確，將輸入的陣列資訊每個值透過`forEach`讀取，再利用`trim()`方法，將空白字串去除

 
// Get fieldname
function getFieldName(input) {
    return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
 // Check required fields
function checkRequired(inputArr) {
    inputArr.forEach(function(input) {
        if(input.value.trim() === ''){
            showError(input, `${getFieldName(input)} is required`);
        } else {
            showSuccess(input);
        }
    });
}

### Email格式驗證
- 透過別人寫好的emial驗證函式，直接帶入驗證，並加入if迴圈，設定不同情況所執行不同的showError()

function isValidEmail(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,}))$/;
    // return re.test(String(email).toLowerCase());
    if(re.test(input.value.trim())) {
        showSuccess(input);
    } else {
        showError(input, 'Email is not valid');
    }
}

### 調整驗證機制
原本一開始是設定submit事件，並在function帶入多項if迴圈判斷，但這樣顯得整個程式碼繁雜。可以透過導入設定好的判斷函式，簡化程式碼。

form.addEventListener('keyup',function(e){
    e.preventDefault();
    checkRequired([username, email, password, password2]);
    checkLength(username, 3, 15);
    checkLength(password, 8, 16);
    isValidEmail(email);
    if(!checkRequired([password, password2])){
    checkLength(password, 8, 16);
    checkPasswordMatch(password, password2);
    }
})

並已將function checkLength/checkRequired/ isValidEmail設定好在上面

- checkLength
- 帶入三個參數，分別為input, min, max，利用條件判斷要是`input`小於 或是 大於設定條件，就會帶入showError()函式，否則就會導入成功函式
- `‵‵`或是`${}`是E6的新語法，可以在裡面放置變數

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);
    }
}

###### tags: `javascript`