编写一个问卷界面 并用JavaScript来验证表单内容

倘若文章和代码中有任何错误或疑惑，欢迎提出交流哦~

简单的html和css初始化

今天使用JavaScript来实现对表单输入的验证，

首先写出html代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用JavaScript来验证表单</title>
</head>
<body><form action="#"><label for="name">用户名：</label><input type="text" id="name"><br><br><label for="age">年龄：</label><input type="text" id="age"><br><br><label for="email">邮件：</label><input type="email" id="email"><br><br><label for="phone">手机号码：</label><input type="text" id="phone"><br><br><label for="introduce">个人介绍：</label><textarea name="introduce" id="introduce" cols="50" rows="10"></textarea><input type="submit" value="提交"></form>
</body>
</html>

现在页面的效果为：

在这里插入图片描述

这里我们提出要求：

  1. 用户名不超过7个字符，且不能以数字开头。
  2. 年龄在0到200之间。
  3. 邮件的格式就不用多说了。
  4. 手机号码为大陆号码格式，即以13、14、15、16、17、18、19开头的11位数字。
  5. 个人介绍要求在200个字符以内。

现在把这些要求加入到提示信息，并且加上简单的css样式，如以下代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用JavaScript来验证表单</title><style>body {font-family: 'Arial', sans-serif;}form {margin: 0 auto;max-width: 500px;padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: #f5f5f5;}input[type="text"],input[type="email"],textarea {margin: 10px 0;box-sizing: border-box;width: 100%;height: 35px;padding: 5px;border: 1px solid #cccccc;border-radius: 5px;font-size: 15px;}textarea {height: 150px;vertical-align: top;resize: none;}label {font-weight: bold;display: block;}input[type="submit"] {display: block;width: 100%;height: 45px;margin-top: 20px;padding: 0;box-sizing: border-box;background-color: #007BFF;border: none;border-radius: 5px;color: #ffffff;font-size: 16px;cursor: pointer;transition: background-color 0.5s ease;}input[type="submit"]:hover {background-color: #0056b3;}</style>
</head><body><form action="#" onsubmit="return validateForm()"><label for="name">用户名：</label><input type="text" id="name" placeholder="由数字与字母组成，在2到7个字符，且不以数字开头"><br><br><label for="age">年龄：</label><input type="text" id="age" placeholder="在0-200之间"><br><br><label for="email">邮件：</label><input type="email" id="email" placeholder="填入个人邮件"><br><br><label for="phone">手机号码：</label><input type="text" id="phone" placeholder="必须为中国大陆号码"><br><br><label for="introduce">个人介绍：</label><textarea name="introduce" id="introduce" cols="50" rows="10"placeholder="在两百字以内"></textarea><input type="submit" value="提交"></form>
</body>
</html>

效果如图：
在这里插入图片描述

添加JavaScript验证内容

正则表达式的声明格式：
在JavaScript中，正则表达式对象可以使用两种形式之一进行声明：

  • 字面量方式：直接在表达式//内部写入模式，如 /abc/。
    示例：
    var re = /ab+c/;

  • 构造函数方式：这种方式使用 RegExp() 构造器创建正则表达式。
    示例：
    var re = new RegExp('ab+c');

    re 是一个正则表达式对象，它的模式是 ab+c，即字符串中包含一个 a，至少一个 b，然后是一个 c。

两种方式创建的正则表达式是等价的，不过一般情况下更推荐使用字面量方式，因为这种方式更简洁、更容易阅读和编写。但如果需要动态生成正则表达式，或者由于某些原因模式需要存储在一个字符串中，那就需要使用构造函数方式。
在正则表达式中，方括号（[]）用来定义一个字符集合。里面的内容可以是一段范围或者是单独的字符。比如 [0-9] 就表示一个从0到9的数字，[abc] 表示一个可以是 ‘a’、‘b’ 或者 ‘c’ 的字符。
而大括号（{}）在正则表达式中定义一个前面那个字符或者字符集合的重复次数。比如 a{3} 就表示 ‘aaa’，[0-9]{2} 表示两个数字。大括号中还可以定义一个范围，比如 a{2,4} 表示 ‘aa’、‘aaa’ 或者 ‘aaaa’。
当大括号 {} 中有两个数字时，格式为 {m,n}，表示前面的字符或字符组至少重复 m 次，最多重复 n 次。

例如对于文章中用户名的格式，那么正则表达式应该写成/^[a-zA-Z][a-zA-Z0-9]{1,6}$/，
那么可以写出用户名的验证逻辑代码如下：

	// 根据id获取用户名输入框的内容var name_value = document.getElementById('name').value;// 设定用户名规范 正则表达式var name_request = /^[a-zA-Z][a-zA-Z0-9]{1,6}$/;// 使用test方法来检验，若不符合规范则返回falseif (!name_request.test(name_value)) {alert("用户名不符合规范,需由数字与字母组成，在2到7个字符，且不以数字开头");return false;}

依次类推可以得到剩下几个表单项的验证代码：

// 获取年龄输入框中的内容
var age_value = document.getElementById('age').value;
// 使用isNaN函数判断年龄框中的内容是否为非数字，并判断是否在有效年龄范围内
if (isNaN(age_value) || age_value < 0 || age_value > 200) {alert("年龄不符合规范，需在0到200之间。");return false;
}// 获取邮箱输入框的内容
var email_value = document.getElementById("email").value;
// 检查邮箱地址是否包含 '@' 符号来验证其格式是否正确
if (!email_value.includes('@')) {alert("邮箱不符合规范，请输入正确邮箱地址。");return false;
}// 获取电话号码输入框的内容
var phone_value = document.getElementById("phone").value;
// 设定手机号码格式的正则表达式
var phone_request = /^1[3-9][0-9]{9}$/;
// 使用正则表达式的test方法来校验手机号码格式，若手机号码格式不正确则返回false
if (!phone_request.test(phone_value)) {alert("电话号码不符合规范，请输入正确的中国大陆手机号码。");return false;
}// 获取个人介绍输入框的内容
var introduce_value = document.getElementById("introduce").value;
// 检查个人介绍字符长度，如果长度超过200，返回false
if (introduce_value.length > 200) {alert("个人介绍应在200字以内。");return false;
}

接下来我们要实现在表单提交时，验证是否符合规范，用到了事件绑定，即在表单提交时绑定一个事件，并且我们为这个事件编写一个函数，代码如下：

html内容：

<form onsubmit="return validateForm()"><!-- 表单内容 -->
</form>

这里如果validateForm函数返回一个true值，则表单提交就会被通过，否则表单提交就会被阻止。

接下来，我们在script内容中，把上面写的JavaScript逻辑内容放入validateForm函数，即

function validateForm() {// 根据id获取用户名输入框的内容var name_value = document.getElementById('name').value;// ...// 所有的验证逻辑都在这里// ...return true;  // 表示验证都通过了
}

全部代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用JavaScript来验证表单</title><style>body {font-family: 'Arial', sans-serif;}form {margin: 0 auto;max-width: 500px;padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: #f5f5f5;}input[type="text"],input[type="email"],textarea {margin: 10px 0;box-sizing: border-box;width: 100%;height: 35px;padding: 5px;border: 1px solid #cccccc;border-radius: 5px;font-size: 15px;}textarea {height: 150px;vertical-align: top;resize: none;}label {font-weight: bold;display: block;}input[type="submit"] {display: block;width: 100%;height: 45px;margin-top: 20px;padding: 0;box-sizing: border-box;background-color: #007BFF;border: none;border-radius: 5px;color: #ffffff;font-size: 16px;cursor: pointer;transition: background-color 0.5s ease;}input[type="submit"]:hover {background-color: #0056b3;}</style>
</head><body><form action="#" onsubmit="return validateForm()"><label for="name">用户名：</label><input type="text" id="name" placeholder="由数字与字母组成，在2到7个字符，且不以数字开头"><br><br><label for="age">年龄：</label><input type="text" id="age" placeholder="在0-200之间"><br><br><label for="email">邮件：</label><input type="email" id="email" placeholder="填入个人邮件"><br><br><label for="phone">手机号码：</label><input type="text" id="phone" placeholder="必须为中国大陆号码"><br><br><label for="introduce">个人介绍：</label><textarea name="introduce" id="introduce" cols="50" rows="10"placeholder="在两百字以内"></textarea><input type="submit" value="提交"></form>
</body>
<script>function validateForm() {// 根据id获取用户名输入框的内容var name_value = document.getElementById('name').value;// 设定用户名规范 正则表达式var name_request = /^[a-zA-Z][a-zA-Z0-9]{1,6}$/;// 使用test方法来检验，若不符合规范则返回falseif (!name_request.test(name_value)) {alert("用户名不符合规范,需由数字与字母组成，在2到7个字符，且不以数字开头。");return false;}// 获取年龄输入框中的内容var age_value = document.getElementById('age').value;// 使用isNaN函数判断年龄框中的内容是否为非数字，并判断是否在有效年龄范围内if (isNaN(age_value) || age_value < 0 || age_value > 200) {alert("年龄不符合规范，需在0到200之间。");return false;}// 获取邮箱输入框的内容var email_value = document.getElementById("email").value;// 检查邮箱地址是否包含 '@' 符号来验证其格式是否正确if (!email_value.includes('@')) {alert("邮箱不符合规范，请输入正确邮箱地址。");return false;}// 获取电话号码输入框的内容var phone_value = document.getElementById("phone").value;// 设定手机号码格式的正则表达式var phone_request = /^1[3-9][0-9]{9}$/;// 使用正则表达式的test方法来校验手机号码格式，若手机号码格式不正确则返回falseif (!phone_request.test(phone_value)) {alert("电话号码不符合规范，请输入正确的中国大陆手机号码。");return false;}// 获取个人介绍输入框的内容var introduce_value = document.getElementById("introduce").value;// 检查个人介绍字符长度，如果长度超过200，返回falseif (introduce_value.length > 200) {alert("个人介绍应在200字以内。");return false;}}
</script>
</html>

效果如图：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/21296.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

国产算力——摩尔线程算力芯片MTT S80、MTT S3000

国产算力——摩尔线程算力芯片MTT S80、MTT S3000

摩尔线程算力芯片是摩尔线程智能科技&#xff08;北京&#xff09;有限责任公司&#xff08;简称&#xff1a;摩尔线程&#xff09;的主要产品&#xff0c;该公司专注于GPU芯片的设计和相关产品的研发。以下是关于摩尔线程算力芯片的一些关键信息&#xff1a; 产品概述&#x…
阅读更多...
Halcon 双相机标定与拼图（一）

Halcon 双相机标定与拼图（一）

二、算子解释 get_calib_data camera-pose 获得基于第一个相机的第二个相机的Pose get_calib_data (CalibDataID, camera, 1, pose, RelPose2) *relative 相对 * To get the absolute pose of the second camera, its relative pose needs * to be inverted and combined…
阅读更多...
C/C++文件读写

C/C++文件读写

一.c语言实现 常用函数介绍 C语言中文件读写操作主要通过stdio.h中的文件操作函数来实现。常用的文件操作函数有fopen、fclose、fread、fwrite、fseek、ftell等。 1.fopen函数&#xff1a;用于打开一个文件&#xff0c;并返回一个指向该文件的指针。函数原型如下&#xff1a; …
阅读更多...
[docker] docker-compose-redis.yml

[docker] docker-compose-redis.yml

docker-compose-redis.yml version: 3services:redis:image: redis:6.2.7container_name: redisports:- "6379:6379"environment:# 时区上海TZ: Asia/Shanghaivolumes:# 配置文件- /docker/redis/conf:/redis/config# 数据文件- /docker/redis/data/:/redis/data/co…
阅读更多...
java递归计算文件夹和文件大小

java递归计算文件夹和文件大小

背景 背景发现电脑c盘占用过高，然而我却不清楚是哪些文件占用了磁盘空间，于是我希望用程序来帮我完成这件事。小插曲：开始的时候，我使用python来做的，结果发现效率实在是太低，最后用java重写了一波。有需要的同学可以拿去修改一些。 代码 import java.io.File; import ja…
阅读更多...
监控易监测对象及指标之：全面监控达梦数据库6

监控易监测对象及指标之：全面监控达梦数据库6

随着企业业务的不断发展&#xff0c;数据库作为信息存储和管理的核心&#xff0c;其稳定性和安全性成为了企业运营的关键。达梦数据库6作为国产数据库的代表之一&#xff0c;在各类业务场景中发挥着重要作用。 为了确保达梦数据库6的稳定运行和数据安全&#xff0c;对其进行全面…
阅读更多...
QT 音乐播放器【二】 歌词同步+滚动+特效

QT 音乐播放器【二】 歌词同步+滚动+特效

文章目录 效果图概述代码解析歌词歌词同步歌词特效 总结 效果图 概述 先整体说明一下这个效果的实现&#xff0c;你所看到的歌词都是QGraphicsObject&#xff0c;在QGraphicsView上绘制(paint)出来的。也就是说每一句歌词都是一个图元(item)。 为什么用QGraphicsView框架&…
阅读更多...
1121 祖传好运

1121 祖传好运

solution 好运数&#xff1a;去除任意位末尾数位 所得到的数都满足能够被当前数位整除 #include<iostream> #include<string> using namespace std; int main(){int k, flag;string s;cin >> k;while(k--){flag 1;cin >> s;for(int i 1; i < s.…
阅读更多...
【Linux】进程（3）：运行，阻塞，挂起

【Linux】进程（3）：运行，阻塞，挂起

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解Linux进程&#xff08;3&#xff09;&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 &#xff08;A&#xff09; 运行&#xff08;R&#xff09;进程切…
阅读更多...
在gitlab上发布npm二进制文件

在gitlab上发布npm二进制文件

❝ 允许奇迹发生 ❞ 大家好&#xff0c;我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。 前言 还记得之前我们讲过如何在 npm 上发布二进制文件&#xff1f;吗。我们通过npm将我们之前在Rust 赋能前端-开发一款属于你的前端脚手架中生成Rust二进制文…
阅读更多...
生物制药企业选择谷歌云的理由有哪些？

生物制药企业选择谷歌云的理由有哪些？

AI发展的这一年&#xff0c;科学家也紧随其后&#xff0c;透过AI拓展更多微观层面的生物学奥义&#xff0c;包括蛋白质折叠等。生物制药公司也加大了在药物研发领域的投入&#xff0c;其中一方面就是搭载云平台。那么&#xff0c;生物制药公司选择谷歌云的原因有哪些呢&#xf…
阅读更多...
Python | Leetcode Python题解之第128题最长连续序列

Python | Leetcode Python题解之第128题最长连续序列

题目&#xff1a; 题解&#xff1a; class Solution:def longestConsecutive(self, nums: List[int]) -> int:longest_streak 0num_set set(nums)for num in num_set:if num - 1 not in num_set:current_num numcurrent_streak 1while current_num 1 in num_set:curre…
阅读更多...
【杂记-TCP协议三次握手、四次挥手始末详解】

【杂记-TCP协议三次握手、四次挥手始末详解】

一、三次握手前&#xff1a; 使用TCP协议的原因 TCP协议的目的是为了保证数据能在两端准确、连续的传输。 传输中使用Socket数据结构 TCP协议可使一个设备能同时与多个设备交互信息&#xff0c;它必须要保证不同传输通道之间不会产生串联或相互影响&#xff0c;所以TCP使用Soc…
阅读更多...
Flutter基础 -- Dart 语言 -- 进阶使用

Flutter基础 -- Dart 语言 -- 进阶使用

目录 1. 泛型 generics 1.1 泛型使用 1.2 泛型函数 1.3 构造函数泛型 1.4 泛型限制 2. 异步 async 2.1 异步回调 then 2.2 异步等待 await 2.3 异步返回值 3. 生成器 generate &#xff08;了解&#xff09; 3.1 同步生成器 sync* 使用 sync* 的场景 总结 3.2 异…
阅读更多...
【C语言】编译与链接：深入理解程序构建过程

【C语言】编译与链接：深入理解程序构建过程

&#x1f525;引言 本篇将深入理解程序构建过程&#xff0c;以便于我们在编写程序的过程同时&#xff0c;理解底层是如何从程序的创建到生成可执行程序的。 &#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专…
阅读更多...
MongoDB全文检索: 助力快速精准的文本搜索

MongoDB全文检索: 助力快速精准的文本搜索

MongoDB 全文检索是一种强大的功能&#xff0c;允许用户在文档中进行高效的文本搜索。它提供了对文本数据的复杂查询和索引支持&#xff0c;使得在大规模数据库中进行搜索变得更加快速和精确。本文将详细介绍 MongoDB 全文检索的基本语法、命令、示例、应用场景、注意事项&…
阅读更多...
软件设计师-知识点

软件设计师-知识点

系统总线 系统总线分为三部分&#xff1a; 数据总线地址总线控制总线 主要作用&#xff1a;用于CPU、主存和外设部件之间的连接 DMA控制器/中断控制器(CPU) DMA控制器和中断控制器(CPU)发出的数据地址&#xff1a;主存物理地址 释&#xff1a;和I/O设备相关的数据都是直接读…
阅读更多...
【前端面试常见问题】如何实现一个元素的水平垂直居中

【前端面试常见问题】如何实现一个元素的水平垂直居中

目录 1. 使用 Flexbox 代码示例&#xff1a; 2. 使用 Grid 代码示例&#xff1a; 3. 绝对定位与transform 代码示例&#xff1a; 4. 表格布局方法 代码示例&#xff1a; 5. margin: auto 方法 代码示例&#xff1a; 在网页设计中&#xff0c;将元素精准地置于容器的中…
阅读更多...
c++与c

c++与c

命名空间的设置&#xff1a; 避免冲突 命名空间&#xff1a; 如果将变量全部定义在全局可能不安全&#xff0c;都可以进行修改。 如果将变量定义在局部&#xff0c;当出了大括号就不能使用。 所以说在定义一个命名空间的时候 定义函数&#xff0c;变量&#xff0c;命名空间…
阅读更多...
软件3班20240603

软件3班20240603

经典 报错 404 大概率 就是 这图 的 路径 写错i了 package com.yanyu;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import jav…
阅读更多...
最新文章

Copyright @ 2022~2023