表单验证

对于学到的知识dom编程想做一个自己的表单验证,由于很多技术掌握不好,做了一个简易版的,如下:

首先对表单的输入框的设置调整,能够看起来会好一点:

     body {
            width: 1000px;
            height: 600px;
            border: 1px solid #f00;
        }
        div{
            /*border: 1px solid #00f;*/
        }

        .left{
            float: left;
            margin-left: 100px;
            height: 500px;
            width: 490px;
        }

        .kk {
            width: 100%;
            height: 45px;
            margin-bottom: 15px;
        }

        .kk .ip {
            float: right;
            width: 320px;
            height: 40px;
            border: 1px solid #3498db;
            border-radius: 5px;
            color: #fff;
        }

        .kk > .singName {
            display: inline-block;
            float: right;
            height: 40px;
            line-height: 40px;
            font-size: 19px;
            text-align:center ;
            padding-right: 25px;
            font-weight: 900;
        }

        .right{
            display: inline-block;
            float: left;
            height: 500px;
            width: 250px;
        }
        form span{
            display: inline-block;
            height: 40px;
            width: 100%;
            line-height: 40px;
            margin-bottom: 20px;
            color: #f00;
        }
    </style>

做好这些之后再对点击按钮进行监听,再判断输入框中的内容是否符合条件再做出相应不同类型的效果提醒:

<form action="result.html">
    <div class="left">
        <div class="kk">
            <input class="ip" type="text" name="username">
            <div class="singName">Username:</div>
        </div>
        <div class="kk">
            <input class="ip" type="password" name="password">
            <div class="singName">Password:</div>
        </div>
        <div class="kk">
            <input class="ip" type="email" name="email">
            <div class="singName">Email:</div>
        </div>
        <div class="kk">
            <input class="ip" type="phone" name="phone">
            <div class="singName">Phone:</div>
        </div>
        <div class="kk">
            <input class="ip" type="text" name="username">
            <div class="singName">Company:</div>
        </div>
        <div class="kk">
            <input class="ip" type="text" name="username">
            <div class="singName">Addrres:</div>
        </div>
    </div>
    <div class="right">
        <span id="vname"></span>
        <span id="vpwd"></span>
        <span id="vemail"></span>
    </div>

    <button type="button" id="submitBtn">register</button>
</form>
<script>
    function $id(id){
        return document.getElementById(id);
    }

    $id('submitBtn').addEventListener('click',function() {
        var f = document.forms[0];
        let uname = f.username.value;
        if (uname.length == 0) {
            $id('vname').innerText = "请输入用户名";
            f.username.style.borderColor = '#f00';
            return;
        } else {
            $id('vname').innerText = "";
            f.username.style.borderColor = '#00f';
        }

        let pwd = f.password.value;
        if (pwd.length == 0) {
            $id('vpwd').innerText = "请输入密码"
            return;
        } else if (pwd.length >= 8 && pwd.silent <= 16) {
            $id('vpwd').innerText = "密码格式不正确";
            f.username.style.borderColor = '#f00';
            return;
        } else {
            $id('vname').innerText = "";
            f.username.style.borderColor = '#00f';
        }

        let eal = f.email.value;
        if (eal.length == 0) {
            $id('vemail').innerText = "请填写邮箱"
            return;
        } else if (eal != /^\w+@\w+(\.\w+)+$/) {
            $id('vemail').innerText = "邮箱格式不正确";
            f.username.style.borderColor = '#f00';
            return;
        }

        f.submit();
    });

因为没花多少时间,页面比较粗糙,在后期还可以继续调整: