手写表单及h5表单验证举例

表单是一个很重要的概念，这里涉及到收集数据以及验证数据，以及表单的用户体验。一般ui框架会有封装好的这些功能。

这里复习一下手写表单，顺带复习一下表单的基本属性，基本样式和h5的表单验证。

一个表单基本包含一个html结构，即表单结构，针对html的样式，表单验证，表单提交。这里会把前三项的相关代码贴出来。大家组合到一个html页面之中，就可以形成一个完整的功能。

表单基本结构

一般包含 label(optional), input,错误提示。错误提示的形式各式各样，有h5自带的样式，也可以自定义一个。下面举例一个包含用户名和邮箱的表单。其中用户名验证是否填写，长度在3-15字符以内，邮箱验证是否填写，是否符合邮箱类型。

<form class="form" action="">
        <h4>表单的功能及校验</h4>
        <!-- text -->
        <div class="input-block">
            <label for="userName" class="input-label">用户名：</label>
            <input type="text" 
                name="userName" 
                id="userName" 
                required
                minlength="3"
                maxlength="15"
                placeholder="请输入用户名">
            <span class="err-msg">3~15字符</span>
            <!-- <span class="inform-msg">3~15字符</span> -->
        </div>
        <!-- email -->
        <div class="input-block">
            <label for="mail" class="input-label">邮箱：</label>
            <input type="email" 
                required
                name="mail" 
                id="mail" placeholder="请输入邮箱">
            <span class="err-msg"></span>
        </div>

        <!-- submit -->
        <div class="button" onclick="submitData()">提交</div>
    
    </form>

表单基本样式

针对以上的html,做简单的样式书写。表单整体居中，提示语在最右端显示。错误时为红色。这里简单贴一下代码。

<style>
        .form{
            text-align:center;
        }
        .form .input-block{
            position:relative;
            margin:0 auto;
            padding:15px 0;
            width:700px;
        }
        .form .input-block .input-label{
            display:inline-block;
            text-align:left;
            width:80px;
        }
        .form .input-block .err-msg{
            position:absolute;
            left:480px;
            top:17px;
            font-size:12px;
            color:#333;
            
        }
        .form .button{
            margin:0 auto;
            width:42px;
            height:20px;
            line-height:20px;
            padding:5px;
            text-align:center;
            border-radius: 5px;
            background:#ccc;
            font-size:13px;
        }

表单验证

h5自带了表单验证，验证后的提示信息，也有自带的，也可以自己写。这里是自己写样式，见上面。表单有一些自带的属性，如min,max,step,minLength,maxLength,type="email",type="number"....等等，都与表单验证有关系。大家可以打印出元素的validity属性，例如，在某个触发事件下，console.log(this.validity),结果是一个叫做validityState对象，如下，

针对如上表单，验证用户名及密码，效果和代码如下所示：

 

<script>
        //用户名
        let userName=document.getElementById('userName');
        userName.onblur=function(){
            let errMsg=document.querySelector("#userName+.err-msg");
            console.log(this.validity)
            if(this.validity.valueMissing){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='用户名不可以为空'
            }else if(this.validity.tooLong){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='用户名不可以超过15字符'
            }else if(this.validity.tooShort){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='用户名不可以短过3个字符'
            }else{
                errMsg.style.color="#333"
                errMsg.innerHTML='3~15字符'
            }
        }
        //邮箱
        let mail=document.getElementById('mail');
        mail.onblur=function(){
            let errMsg=document.querySelector("#mail+.err-msg");
            if(this.validity.valueMissing){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='邮箱不能为空喔'
            }else if(this.validity.typeMismatch){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='输入无效,请输入邮箱地址'
            }else{
                errMsg.display='none';
                errMsg.style.color="#333"
                errMsg.innerHTML=''
            }
        }

        //表单提交
        function submitData(){
            console.log("在这里提交表单")
        }

    
    </script>

 

表单提交

这里不再贴出表单提交的代码，纯粹原生的话，需要封装一个函数，逐个获取到数据。本质上上form.elements可以获得所有的表单。可以通过element.value获得表单的值。element.checked看单/复选的选择情况，这些都是表单的共有的属性。如果是在框架中写，比如Vue中，则很容易获取到对应的变量。一般一个表单是一个变量，其下有对应的数据。验证之后，将变量提交给后台。

关于vue中的数据提交，可以见我之前写的一篇文章，大致如文中所述

https://blog.csdn.net/mia1106/article/details/79552560

注意这里使用的div提交，没有使用自带的input type="submit",注意这个提交时会自带刷新，一般需要阻止自带事件。由于现在表单基本上是异步提交，自己写提交函数，所以，我选择了自己写提交标签。