前端案例：表单验证

风吃掉月亮'<>'

已于 2022-07-08 15:09:29 修改

阅读量526

点赞数 1

文章标签：前端

于 2022-07-08 15:07:46 首次发布

本文链接：https://blog.csdn.net/weixin_65510135/article/details/125678518

版权

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

1.HTML

2.css

3.JS

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

1.HTML

<body>
    <div class="form-container">
        <form action="https://www.baidu.com" id="register" method="post">
            <h3>用户注册</h3>
            <div class="form-group">
                <label for="username" class="form-lable">用户名</label>
                <div class="form-input">
                    <input type="text" id="username" value="">
                    <span class="error"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="form-lable">密码</label>
                <div class="form-input">
                    <input type="password" id="pwd">
                    <span class="error"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="repwd" class="form-lable">确认密码</label>
                <div class="form-input">
                    <input type="password" id="repwd">
                    <span class="error"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="sex" class="form-lable">性别</label>
                <div class="form-input">
                    <input type="radio" name="sex" value="male">男
                    <input type="radio" name="sex" value="female">女
                    <span class="error"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="grade" class="form-lable">年级</label>
                <div class="form-input">
                    <select name="" id="grade">
                        <option class="grade" value="">请选择</option>
                        <option class="grade" value="2021">2021级</option>
                        <option class="grade" value="2020">2020级</option>
                        <option class="grade" id="2019" value="2019">2019级</option>
                    </select>
                    <span class="error"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="hobby" class="form-lable">爱好</label>
                <div class="form-input">
                    <input type="checkbox" name="hobby" value="sing">唱歌
                    <input type="checkbox" name="hobby" value="dance">跳舞
                    <input type="checkbox" name="hobby" value="draw">画画
                    <span class="error"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="form-lable">邮箱</label>
                <div class="form-input">
                    <input type="text" id="email" value="">
                    <span class="error"></span>
                    <!-- <input type="email" name="email"> -->

                </div>
            </div>
            <div class="form-group">
                <label for="" class="form-lable"></label>
                <div class="form-input">
                    <input type="submit" value="提交">
                </div>
            </div>
        </form>
    </div>
</body>

2.css

  /* 浏览器样式默认重置 */
        * {
            margin: 0;
            padding: 0;
        }

        .form-container {
            /* 水平居中 左右auto */
            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<elem.length;i++){
            if(elem[i].checked){
                hasChecked=true;
                break;
            }
        }
        return hasChecked;
    }