前端案例：表单验证

 本文分享自己的一些有关表单验证的代码

目录

1.HTML

2.css 

3.JS

---

PS：本案例并未完美实现，只是用一些简单的代码完成的。

1.HTML

    
        

            用户注册
            
                用户名
                
                    
                    
                
            
            
                密码
                
                    
                    
                
            
            
                确认密码
                
                    
                    
                
            
            
                性别
                
                    男
                    女
                    
                
            
            
                年级
                
                    
                        请选择
                        2021级
                        2020级
                        2019级
                    
                    
                
            
            
                爱好
                
                    唱歌
                    跳舞
                    画画
                    
                
            
            
                邮箱
                
                    
                    
                    

                
            
            
                
                
                    
                
            
        
    

2.css 

  
        * {
            margin: 0;
            padding: 0;
        }

        .form-container {
            
            margin: 100px auto;
            width: 300px;
            border: 1px black solid;
        }

        .form-container h3 {
            text-align: center;
        }

        .form-group {
            margin: 10px;
            display: flex;
        }

        .form-lable {
            flex: 4;
            text-align: right;
            margin-right: 10px;
        }

        .form-input {
            flex: 8;
        }

        .form-input .error {
            display: none;
            color: #f00;
            font-size: 12px;
        }

3.JS

 let register=document.querySelector('#register')
    let username=document.querySelector('#username')
    let password=document.querySelector('#pwd')
    let repwd=document.querySelector('#repwd')
    let sexes=document.getElementsByName('sex')
    let grade=document.querySelector("#grade")
    let hobbies=document.getElementsByName('hobby')
    let email=document.querySelector("#email")
    register.onsubmit=function(){
        let canSubmit=true
        // 用户名
        if(username.value.trim()==''){
            showError(username,"请输入用户名")
            canSubmit=false;
        }
        else{
            showError(username,"")
        }
        // 密码
        if(password.value.length<6){
            showError(password,"密码长度不能小于六位")
            canSubmit=false;
        }
        else{
            showError(password,"")
        }
        // 确认密码
        if(repwd.value!=password.value){
            showError(repwd,"两次密码应一致")
            canSubmit=false;
            // alert
        }
        else{
            showError(repwd,"")
        }
        // 性别
        if(!checked(sexes)){
            showError(sexes[0],"请选择性别")
            canSubmit=false;
        }
        else{
            showError(sexes[0],"")
        }
        // 年级
        if(grade.value==""){
            showError(grade,"请选择年级")
            canSubmit=false;
        }
        else{
            showError(grade,"")
        }
        //爱好 
        if(!checked(hobbies)){
            showError(hobbies[0],"请选择爱好")
            canSubmit=false;
        }
        else{
            showError(hobbies[0],"")
        }
        // 邮箱地址
        if(email.value.trim().indexOf('@')==-1){
            showError(email,"请输入正确的邮箱地址")
            canSubmit=false;
        }
        else{
            showError(email,"")
        }
        return canSubmit;
    }
    function showError(elem,error){
        let errSpan=elem.parentNode.lastElementChild;
        errSpan.innerHTML=error;
        errSpan.style.display='block';
        
    }
    function checked(elem){
        let hasChecked=false;
        for(let i=0;i