<html> <head> <title></title> <script> function CheckForm(){ if (CheckUserName() && CheckPassword() && CheckConfirmedPassword()){ return true; } else{ return false; } } function CheckUserName(){ if ($("#UserName").val() == ""){ $("#ErrorMessage1").html("用户名不能为空！") //$("#UserName").focus(); return false; } else{ $("#ErrorMessage1").html("") return true; } } function CheckPassword() { if ($("#Password").val() == "") { $("#ErrorMessage2").html("密码不能为空！") //$("#Password").focus(); return false; } else { $("#ErrorMessage2").html("") return true; } } function CheckConfirmedPassword() { CheckPassword(); if ($("#ConfirmedPassword").val() != $("#Password").val()) { $("#ErrorMessage3").html("密码不一致") //$("#ConfirmedPassword").focus(); return false; } else { $("#ErrorMessage3").html("") return true; } } </script> </head> <body> <h1>注册页面</h1> @using (Html.BeginForm("SignUp", "Part2", FormMethod.Post ,new{id="MyForm", name="MyForm"})) { <p>用户名：@Html.TextBox("UserName","",new{onblur="CheckUserName()"}) <span id="ErrorMessage1" style="color:red"></span></p> <p>密码：@Html.TextBox("Password","",new{onblur="CheckPassword()"}) <span id="ErrorMessage2" style="color:red"></span></p> <p>重复密码：@Html.TextBox("ConfirmedPassword","",new{onblur="CheckConfirmedPassword()"}) <span id="ErrorMessage3" style="color:red"></span></p> <input type="submit" class="btn-success" onclick="CheckForm()" /> } </body> </html>
时间: 2023-07-24 18:13:28 浏览: 52
这是一段 HTML 代码，包含一个注册页面的表单。表单中包含了三个输入框，分别是用户名、密码和确认密码，以及一个提交按钮。在输入框失去焦点时，会调用 JavaScript 函数进行校验，并在下方显示错误信息。同时，点击提交按钮时，也会调用 JavaScript 函数进行校验，如果校验通过，则将表单提交到名为 "SignUp" 的控制器的 "Part2" 方法中进行处理。
相关问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>leon</title> <style> * { margin: 0; padding: 0; } form { width: 500px; padding: 20px; border: 10px solid pink; border-radius: 15px; margin: 50px auto; display: flex; flex-direction: column; } form > label { height: 50px; position: relative; } form > label > span { position: absolute; left: 20px; bottom: 5px; color: red; display: none; } form > label > span.active { display: block; } </style> </head> <body> <form action=""> <label for=""> 用户名 : <input class="username" type="text"> <span>用户名必须字母开头6-12位, 请重新填写 ^^</span> </label> <label for=""> 密 码 : <input class="password" type="text"> <span>密码必须6-12位, 请重新填写 ^^</span> </label> <label for=""> 手机号 : <input class="phone" type="text"> <span>手机号不符合规则, 请重新填写 ^^</span> </label> <label for=""> 昵 称 : <input class="nickname" type="text"> <span>昵称必须3~5位中文, 请重新填写 ^^</span> </label> <button>提交</button> </form> </body> </html> <script src="./index.js" type="module"></script>请编写js代码实现功能，并满足在输入时验证不正确显示active样式
好的，您可以尝试使用以下 JavaScript 代码实现您的功能需求：
```js
const form = document.querySelector('form');
const usernameInput = document.querySelector('.username');
const passwordInput = document.querySelector('.password');
const phoneInput = document.querySelector('.phone');
const nicknameInput = document.querySelector('.nickname');
const usernameSpan = document.querySelector('.username + span');
const passwordSpan = document.querySelector('.password + span');
const phoneSpan = document.querySelector('.phone + span');
const nicknameSpan = document.querySelector('.nickname + span');
function checkUsername() {
const username = usernameInput.value.trim();
const regex = /^[a-zA-Z]\w{5,11}$/;
if (!regex.test(username)) {
usernameSpan.classList.add('active');
return false;
} else {
usernameSpan.classList.remove('active');
return true;
}
}
function checkPassword() {
const password = passwordInput.value.trim();
if (password.length < 6 || password.length > 12) {
passwordSpan.classList.add('active');
return false;
} else {
passwordSpan.classList.remove('active');
return true;
}
}
function checkPhone() {
const phone = phoneInput.value.trim();
const regex = /^1[3-9]\d{9}$/;
if (!regex.test(phone)) {
phoneSpan.classList.add('active');
return false;
} else {
phoneSpan.classList.remove('active');
return true;
}
}
function checkNickname() {
const nickname = nicknameInput.value.trim();
const regex = /^[\u4e00-\u9fa5]{3,5}$/;
if (!regex.test(nickname)) {
nicknameSpan.classList.add('active');
return false;
} else {
nicknameSpan.classList.remove('active');
return true;
}
}
function checkForm() {
const isUsernameValid = checkUsername();
const isPasswordValid = checkPassword();
const isPhoneValid = checkPhone();
const isNicknameValid = checkNickname();
return isUsernameValid && isPasswordValid && isPhoneValid && isNicknameValid;
}
form.addEventListener('submit', (event) => {
event.preventDefault();
if (checkForm()) {
alert('恭喜，验证通过！');
} else {
alert('很抱歉，验证失败，请检查输入！');
}
});
usernameInput.addEventListener('input', checkUsername);
passwordInput.addEventListener('input', checkPassword);
phoneInput.addEventListener('input', checkPhone);
nicknameInput.addEventListener('input', checkNickname);
```
这段代码主要做了以下几个事情：
1. 通过 `querySelector` 方法获取表单元素和相关的输入框和提示文本元素；
2. 分别编写了 4 个验证函数，用于验证用户名、密码、手机号和昵称的格式是否符合要求，并在验证失败时添加 `active` 类名以显示提示文本；
3. 编写了一个 `checkForm` 函数，用于检查整个表单是否通过验证；
4. 在表单提交事件中，阻止默认行为，调用 `checkForm` 函数检查表单是否通过验证，并根据结果显示相应的提示信息；
5. 在输入框的输入事件中，调用相应的验证函数进行实时验证。
通过这样的代码实现，用户在输入时会实时得到验证的反馈，如果输入不合法，则会显示相应的提示文本。如果用户提交表单时，表单中有任何一个输入框不合法，则会提示用户重新检查输入。如果全部通过验证，则会提示用户验证通过。同时，不正确的输入会添加 `active` 类名来显示提示文本，让用户更加直观地了解错误原因。
解释下段代码margin: auto; } #formBox div{ margin-top: 5px; } #formBox div input{ box-sizing: border-box; padding: 5px; } </style> </head> <body bgcolor="CC999"> <div id="formBox"> <form name="myform" action="" method="get" onclick="return checkForm();"> <div> 姓名：<input type="text" name="name"><p> </div> <div> 密码：<input type="password" name="code"><p> </div> <div> 性别：<input type="radio" name="a1" value="1" onClick="a=this.value">男 <input type="radio" name="a1" value="2" onClick="a=this.value">女<p> </div> <input type="button" value="提交" onclick="checkForm();"> </form> </div> </body>
这段代码是一个简单的HTML页面，包含一个表单(form)。其中，margin: auto;的作用是使表单居中显示。#formBox div的作用是选择表单中的每个div元素，并设置它们的顶部间距为5像素。#formBox div input的作用是选择表单中每个div元素中的input元素，并将它们的盒模型设置为border-box，同时设置它们的内边距(padding)为5像素。在表单中，有姓名(name)、密码(code)和性别(a1)三个输入框。其中，性别用了两个单选按钮(radio)，分别对应“男”和“女”，并且通过onClick事件绑定了一个JavaScript函数，将选择的值存储在变量a中。最后，表单中还有一个提交按钮，通过onclick事件绑定了一个名为checkForm()的JavaScript函数，用于验证表单数据的正确性。整个页面的背景颜色为CC999。
相关推荐
最新推荐
JS判断form内所有表单是否为空的简单实例
function checkForm(){ var input_cart=document.getElementsByTagName_r("INPUT"); for(var i=0; i<input_cart.length; i++) { if(input_cart[i].value==""||input_cart[i].value==null) { alert("信息...
android手机应用源码Imsdroid语音视频通话源码.rar
android手机应用源码Imsdroid语音视频通话源码.rar
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
可见光定位LED及其供电硬件具体型号，广角镜头和探测器，实验设计具体流程步骤，
1. 可见光定位LED型号：一般可使用5mm或3mm的普通白色LED，也可以选择专门用于定位的LED，例如OSRAM公司的SFH 4715AS或Vishay公司的VLMU3500-385-120。
2. 供电硬件型号：可以使用常见的直流电源供电，也可以选择专门的LED驱动器，例如Meanwell公司的ELG-75-C或ELG-150-C系列。
3. 广角镜头和探测器型号：一般可采用广角透镜和CMOS摄像头或光电二极管探测器，例如Omron公司的B5W-LA或Murata公司的IRS-B210ST01。
4. 实验设计流程步骤：
1）确定实验目的和研究对象，例如车辆或机器人的定位和导航。
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。
"互动学习：行动中的多样性与论文攻读经历"
多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动，互动学习以行动为中心的强化学习学会互动，互动学习，以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授：智囊团论文联合主任菲利普·普雷教授，大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授，Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士，Deepmind对于那些及时看到自己错误的人...3谢谢你首先，我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔，"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲，你知道在这篇论文的（许多）错误中，你是我可以依
实现实时监控告警系统：Kafka与Grafana整合
# 1.1 Kafka集群架构
Kafka集群由多个称为代理的服务器组成，这
解释这行代码 c = ((double)rand() / RAND_MAX) * (a + b - fabs(a - b)) + fabs(a - b);
这行代码的作用是随机生成一个浮点数，范围在 a 和 b 之间（包括 a 和 b）。
其中，`rand()` 函数是 C 语言标准库中的一个函数，用于生成一个伪随机整数。`RAND_MAX` 是一个常量，它表示 `rand()` 函数生成的随机数的最大值。
因此，`(double)rand() / RAND_MAX` 表示生成的随机数在 [0, 1] 之间的浮点数。
然后，将这个随机数乘上 `(a - b) - fabs(a - b)`，再加上 `fabs(a - b)`。
`fabs(a - b)` 是 C 语言标准库中的一个函数，用于计算一个数的绝对值。因此，`fabs(a - b)