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

2024-06-03 14:04
文章标签 java 表单 界面 编写 script 内容 验证 并用 问卷

本文主要是介绍编写一个问卷界面 并用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>

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

这篇关于编写一个问卷界面 并用JavaScript来验证表单内容的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1027196。

相关文章

Java实现检查多个时间段是否有重合

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1：定义时间段类步骤2：添加时间段步骤3：检查时间段是否有重合步骤4：输出结果示例代码结语作
阅读更多...
Java中String字符串使用避坑指南

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下：1. 字符串的不可变性：每次修改都创建新对象2. 使用 == 比较字符串，陷阱满
阅读更多...
Java判断多个时间段是否重合的方法小结

Java判断多个时间段是否重合的方法小结

《Java判断多个时间段是否重合的方法小结》这篇文章主要为大家详细介绍了Java中判断多个时间段是否重合的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录判断多个时间段是否有间隔判断时间段集合是否与某时间段重合判断多个时间段是否有间隔实体类内容public class D
阅读更多...
IDEA编译报错“java: 常量字符串过长”的原因及解决方法

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①：StringBui
阅读更多...
Java覆盖第三方jar包中的某一个类的实现方法

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下：需要在
阅读更多...
Java中ArrayList和LinkedList有什么区别举例详解

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》：本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程
阅读更多...
JavaScript中的reduce方法执行过程、使用场景及进阶用法

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》：本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...
Java调用DeepSeek API的最佳实践及详细代码示例

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》：本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.
阅读更多...
Spring AI集成DeepSeek的详细步骤

Spring AI集成DeepSeek的详细步骤

《SpringAI集成DeepSeek的详细步骤》DeepSeek作为一款卓越的国产AI模型,越来越多的公司考虑在自己的应用中集成,对于Java应用来说,我们可以借助SpringAI集成DeepSe... 目录DeepSeek 介绍Spring AI 是什么？1、环境准备2、构建项目2.1、pom依赖2.2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2