手写表单及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" requiredminlength="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" requiredname="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",注意这个提交时会自带刷新，一般需要阻止自带事件。由于现在表单基本上是异步提交，自己写提交函数，所以，我选择了自己写提交标签。