JavaScript原生练习--表单验证

 

>功能：

        点击Submit验证Username、Email、Password、ConfirmPassword

        Username：字符长度6-12

        Email：格式需为email格式

        password:6-25字符

        confirmpassword： 验证是否和password一致

        验证成功：边框为绿色； 验证失败：边框为红色，显示相应报错信息

---

 

>HTML  (文件名：index.html)

        整个表单被一个大

套起来，表单验证区域用

套起来。

        标题用

        中间每一个验证框用

套住，包含 （for中填的一般是和input相同的id名）； placeholder表示未被填入时框内提示信息； 错误提示内容区，此标签將使文本的字体变小一号，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。

        tips：class设置scc样式； id用来设置js

    
    
    
    
    


    

        
            
Register With Us
            

                Username
                
                Error message
            
            

                Email
                
                Error message
            
            

                Password
                
                Error message
            
            

                Confirm password
                
                Error message
            
            submit
        
    

    

---

>CSS  （文件名：index.css）

技巧：声明全局变量
: root {  (放在开头)
      - - success-color: #2ecc71;
      - - error-color: #e74c3c;
}
.form-control.success input {  （引用公共颜色）
      border-color: var(--success-color);
} 

        给设置flex 让表单居中；

        给

设置padding使里面的内容可以对齐；

        合理利用margin （不装文字）和padding （装文字）

                          设置样式：正常的边框颜色、报错边框（以及相应的）、正确边框

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root {
    --success-color: #2ecc71;
    --error-color: #e74c3c;
}

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    min-height: 100vh;
    background-color: #f8fafb;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Open Sans', sans-serif;
}
.container {
    width: 400px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
h2 {
    text-align: center;
    margin: 0 0 20px;  /*上 左右 下 */
}
form {
    padding: 30px 40px;
}
.form-control {
    padding-bottom: 20px;
    margin-bottom: 10px;
    position: relative;
}
.form-control label {
    display: block;
    margin-bottom: 5px;
    color: #777;
}
.form-control input {
    display: block;
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    width: 100%;
    padding: 10px;
    font-size: 14px;
}
.form-control input:focus {
    outline: 0;
    border-color: #777;
}

.form-control.success input{
    border-color: var(--success-color);
}
.form-control.error input{
    border-color: var(--error-color);
}

.form-control small {
    color: var(--error-color);
    position: absolute;
    bottom: 0;
    left: 0;
    visibility: hidden; /*display: none 会改变布局; */
}
.form-control.error small {
    visibility: visible;
}

.form button {
    display: block;
    font-size: 16px;
    padding: 10px;
    width: 100%;
    margin-top: 20px;
    color: #fff;
    background-color: #3498db;
    border: 2px solid #3498db;
    border-radius: 2px;
    cursor: pointer;
}

---

>JavaScript  （文件名： script.js）

        采取先函数封装，然后在事件监听器里调用函数的形式更清晰

        注意：在里会导致点击刷新，解决办法是给事件监听器添加e事件，然后 e.preventDefult(e) 阻止默认事件发生；

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

// Show error input message （显示错误信息）
function showError(input, message) {
    const formControl = input.parentElement;
    formControl.className = 'form-control error';
    const small = formControl.querySelector('small');
    small.innerText = message;
}
//Show sucsess outline （显示成功）
function showSuccess(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
}

// Check required fields （检查是否输入了信息）
function checkRequired(inputArr) {
    inputArr.forEach(function(input) {
        if(input.value.trim() === '') {
            showError(input, `${getFieldName(input)} is required`)
        }
    })
}
//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);
    }
} 
//Check  email is valid （检查email格式）（箭头函数方法怎么用）
function 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)) {
        showSuccess(input)
    } else {
        showError(input, 'Email is not valid')
    }
}
// Check password match （检查二次确认密码是否匹配）
function checkPasswordsMatch(input1, input2) {
    if (input1.value !== input2.value) {
        showError(input2, 'Passsword do not match')
    } else {
        showSuccess(input2)
    }
}

// Get fieldname （首字母大写函数）
    function getFieldName(input) {
        return input.id.charAt(0).toUpperCase() + input.id.slice(1);
    }

    
//Event listener （事件监听器调用函数）
form.addEventListener('submit', function(e) {
    e.preventDefault(e);

    checkRequired([username, email, password, password2])
    checkLength(username, 3, 15);
    checkLength(password, 6, 25);
    checkEmail(email);
    checkPasswordsMatch(password, password2);
})