原生JS-注册表单

原生JS-写一个注册表单

<!--html-->
<div class="container">
    <form id="form" class="form">
        <h2>注册</h2>
        <div class="form-control">
            <label for="username">姓名</label>
            <input type="text" id="username" placeholder="请输入用户名">
            <small>错误提示</small>
        </div>
        <div class="form-control">
            <label for="email">邮箱</label>
            <input type="text" id="email" placeholder="请输入用户名">
            <small>错误提示</small>
        </div>
        <div class="form-control">
            <label for="password">密码</label>
            <input type="password" id="password" placeholder="请输入用户名">
            <small>错误提示</small>
        </div>
        <div class="form-control">
            <label for="password2">确认密码</label>
            <input type="password" id="password2" placeholder="请输入用户名">
            <small>错误提示</small>
        </div>
        <button>提交</button>
    </form>
</div>

/*css*/
/*设置颜色变量*/
:root{
    --success-color:#2ecc71;
    --error-color:#e74c3c;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #f9fafb;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.container {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    width: 400px;
}
h2{
    text-align: center;
    margin: 0 0 20px; /*上，左右为0，下为20*/
}
.form{
    padding: 30px 40px;/*上下为30px，左右为40px*/
}
.form-control{
    margin-bottom: 10px;/*外边距10px*/
    padding-bottom: 20px;/*内边距20px*/
    position: relative;
}
.form-control label{
    color: #777; /*用户名，密码等文字颜色--灰色*/
    display: block;/*独占一行*/
    margin-bottom: 5px;/*外边距5px*/
}
.form-control input{
    width: 100%;
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    display: block;
    padding: 10px;
    font-size: 14px;
}
/*当点击input-输入框的时候，边框发生了变化*/
.form-control input:focus{
    border-color: #777;outline: 0;
}

.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;/*隐藏元素，保留占位*/
}
.form-control.error small{
    visibility: visible;
}

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

//JS验证表单
//get element
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 input error message
function showError(input,message){
    const formControl=input.parentElement;//获得input的父级，即：form-control
    formControl.className='form-control error'
    const small=formControl.querySelector('small');//querySelector() 查看form-control中的id=small的元素
    small.innerText=message;
}

//showSuccess
function showSuccess(input){
    const formControl=input.parentElement;//获得input的父级，即：form-control
    formControl.className='form-control success'
}
//check email is valid
function checkEmail(input){
    const re=/^([A-Za-z0-9_\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    if(!re.test(input.value.trim())){
        showError(input,"邮箱格式错误")
    }
    else {showSuccess(input)}
}

//checkRequired input
function checkRequired(inputArr){//传入input数组
    //获取每一个input的id或input的值
    inputArr.forEach(function (input) {//循环每一个input
        // console.log(input.value)
        if(input.value.trim()===''){//trim去空值//如果
            showError(input,`${getKeyWords(input)}为必填项`) //``反引号，字符串中嵌入变量
        }
        else {
            showSuccess(input)
        }
    })
}

//getKeyWords
function getKeyWords(input){
    return input.placeholder.slice(3)//获取input的placeholder内容，并取第3位开始的字符
}

//checkLength
function checkLength(input,min,max){
    if(input.value.length<min){
        showError(input,`${getKeyWords(input)}至少${min}个字符`)
    }
    else if(input.value.length>max){
        showError(input,`${getKeyWords(input)}少于${max}个字符`)
    }
    else{
        showSuccess(input)
    }

}
//checkPasswordsMatch
function checkPasswordsMatch(input1,input2){
    if(input1.value!==input2.value){
        showError(input2,"密码不匹配");
    }
}


//event lister
form.addEventListener('submit',function (e) {
    e.preventDefault();
    // console.log(username.value)
    checkRequired([username,email,password,password2]);
    checkLength(username,3,15);
    checkLength(password,6,12);
    checkEmail(email);
    checkPasswordsMatch(password,password2)

});