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

最新推荐文章于 2024-07-09 17:01:34 发布

mia1106

最新推荐文章于 2024-07-09 17:01:34 发布

阅读量2.2k

点赞数 2

分类专栏： html/h5 基础文章标签：表单前端表单验证 h5表单

本文链接：https://blog.csdn.net/mia1106/article/details/93979295

版权

本文介绍如何手写HTML表单，包括基本结构、样式设计和H5内置验证，通过示例展示用户名和邮箱的验证过程，探讨表单验证的属性和validityState对象，并提及在Vue中处理表单提交的方法。

摘要由CSDN通过智能技术生成

表单是一个很重要的概念，这里涉及到收集数据以及验证数据，以及表单的用户体验。一般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"