前言
在当前数字时代，电子邮件已经成为联系客户，市场营销，推广、提高转化率以及与客户保持联系的一个重要手段。在网站或应用中添加电子邮件订阅表单是很有必要的。但是如何设计和实现一个好看且能够适应不同设备的表单则是一个挑战。
本文主要介绍如何创建一个响应式设计的电子邮件订阅表单，同时利用 JavaScript 对使用者的输入进行验证和处理。
使用 HTML 和 CSS 实现表单
首先，我们需要创建一个简单的 HTML 页面，然后通过 CSS 样式进行美化。HTML 页面包括表单输入框、提交按钮以及容器等元素，基本结构如下：
<div class="form-container">
<form id="subscribe-form">
<input type="email" id="email-input" placeholder="输入您的邮箱" required>
<button type="submit" id="subscribe-btn">订阅</button>
</form>
</div>其中，<div> 元素是表单容器，里面包含一个 <form> 元素。表单中有一个 email 类型的输入框和一个提交按钮。通过添加 required 属性，我们确保用户必须输入一个有效的电子邮件地址才能提交表单。
接下来，我们就可以使用 CSS 样式对表单进行美化，并制作出一个适用于移动设备和桌面端的响应式设计。
-- -------------------- ---- -------
-- ---- --
--------------- -
------ -----
---------- ------
------- - -----
-
-- ---- --
---- -
-------- -----
---------- -----
---------------- -------
------------ -------
-------- -----
-
-- ----- --
------------------- -
------ -----
---------- ------
------- -----
-------- -----
------- ---- ---- --
------- -----
-------------- -----
-------- -----
---------- -------
-
-- ------- --
--------------------- -
------ -----
---------- ------
------- -----
------- ---- ---- --
------- -----
-------------- -----
----------------- --------
------ -----
---------- -------
------- --------
-
-- ----- --
------ ----------- ------ -
-- --------- --
--------------- -
---------- ------
-
-- ----------------- --
-------------------- --------------------- -
------- ---- ---- --
-
-使用 JavaScript 提交表单和验证输入
可以看到我们已经实现了一个简单的表单，但是仍需要在提交时对输入内容进行验证，以确保用户输入了有效的 email 地址。在验证之后，我们可以将表单内容通过 AJAX 请求提交到服务器。
在 JavaScript 文件中，我们需要选择表单元素并添加一个监听器，以响应用户点击提交按钮事件。在监听器函数中，首先防止表单自动提交，并将 email 地址从输入框中获取。然后使用一个简单的正则表达式对 email 地址进行验证，并在验证失败时同时显示错误消息。
-- -------------------- ---- -------
-- ----------
----- ---- - ------------------------------------------
------------------------------- ------- -- -
-- -----------
-----------------------
-- ------- ----- --
----- ---------- - ---------------------------------------
----- ----- - -----------------
-- -- ----- -----
----- ---------- - -----------------------------------
-- ------------------------- -
----- ------------ - -------------
--------------------- --------------
-------
-
-- -------------------
---
-- --------
-------- ----------------------- ------------- -
-- ------
----- ------------ - ------------------------------
---------------------- - ----------------
---------------------- - -------------
-------------------------------------------------- --------------------------
-- ------------
------------------------------ - ----------
------------------------ - ----------
-- -----------------------
-------------------------------------- -- -- -
----------------------
------------------------------ - ---
------------------------ - ---
---
-示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- --------------- --
-------------------
-------
-- ---- --
--------------- -
------ -----
---------- ------
------- - -----
-
-- ---- --
---- -
-------- -----
---------- -----
---------------- -------
------------ -------
-------- -----
-
-- ----- --
------------------- -
------ -----
---------- ------
------- -----
-------- -----
------- ---- ---- --
------- -----
-------------- -----
-------- -----
---------- -------
-
-- ------- --
--------------------- -
------ -----
---------- ------
------- -----
------- ---- ---- --
------- -----
-------------- -----
----------------- --------
------ -----
---------- -------
------- --------
-
-- ----- --
------ ----------- ------ -
-- --------- --
--------------- -
---------- ------
-
-- ----------------- --
--------------------
--------------------- -
------- ---- ---- --
-
-
-- ------- --
-------------- -
---------- -------
------ --------
----------- ----
-
--------
-------
------
---- -----------------------
----- --------------------
------ ------------ ---------------- -------------------- -------- --
------- ------------- ------------------------------
-------
------
--------
-- ----------
----- ---- - ------------------------------------------
------------------------------- ------- -- -
-- -----------
-----------------------
-- ------- ----- --
----- ---------- - ---------------------------------------
----- ----- - -----------------
-- -- ----- -----
----- ---------- - -----------------------------------
-- ------------------------- -
----- ------------ - -------------
--------------------- --------------
-------
-
-- -------------------
---
-- --------
-------- ----------------------- ------------- -
-- ------
----- ------------ - ------------------------------
---------------------- - ----------------
---------------------- - -------------
-------------------------------------------------- --------------------------
-- ------------
------------------------------ - ----------
------------------------ - ----------
-- -----------------------
-------------------------------------- -- -- -
----------------------
------------------------------ - ---
------------------------ - ---
---
-
---------
-------
-------结论
在本文中，我们了解了如何使用 HTML，CSS 和 JavaScript 创建一个响应式设计的电子邮件订阅表单，并采用正则表达式验证输入内容。无论您是初学者还是经验丰富的前端开发者，我们希望这个示例可以给您提供启示，使您更好地了解如何创建和实现电子邮件订阅表单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6709fcb9d91dce0dc87d8bbe