gpt4 book ai didi

javascript - JS函数似乎没有被HTML表单执行,不知道为什么

转载 作者:行者123 更新时间:2023-12-03 05:31:06 25 4
gpt4 key购买 nike

我有一段时间没有使用 JS 或 HTML,需要创建一个注册页面来将数据提交到数据库。此代码仅用于验证表单(客户端)。看来 JS 函数没有被执行,我知道我在某个地方忘记了一些东西,但我不知道是什么,有人有任何想法吗?

<html>
<head>
<script type="text/javascript">
function validateSignup() {
var redFeild = "";
var greenField = "";

function colourRed(redFeild) {
document.getElementById(redFeild).style.color="ff0000";
}

function colourGreen(greenField) {
document.getElementById(greenField).style.color="08BB3E";
}

var firstV = false;
var userfirst = document.getElementById("userFirst").value;

switch (userfirst, firstV) {
case (userfirst == ""):
redFeild = document.getElementById("first");
colourRed(redFeild);
redFeild = document.getElementById("nameError");
colourRed(redFeild);
break;
case (userfirst.match(/^[a-zA-Z]+$/) == false):
redFeild = document.getElementById("first");
colourRed(redFeild);
redFeild = document.getElementById("nameError");
colourRed(redFeild);
break;
default:
firstV = true;
greenField = document.getElementById("first");
colourGreen(greenField);
greenField = document.getElementById("nameError");
colourGreen(greenField);
break;
}

var lastV = false;
var userlast = document.getElementById("userLast").value;

switch (userlast, lastV) {
case (userlast == ""):
redFeild = document.getElementById("last");
colourRed(redFeild);
redFeild = document.getElementById("nameError");
colourRed(redFeild);
break;
case (userlast.match(/^[a-zA-Z]+$/) == false):
redFeild = document.getElementById("last");
colourRed(redFeild);
redFeild = document.getElementById("nameError");
colourRed(redFeild);
break;
default:
lastV = true;
greenField = document.getElementById("last");
colourGreen(greenField);
greenField = document.getElementById("nameError");
colourGreen(greenField);
break;
}

var emailV = false;
var useremail = document.getElementById("userEmail").value;

switch (useremail, emailV) {
case (useremail == ""):
redFeild = document.getElementById("email");
colourRed(redFeild);
redFeild = document.getElementById("emailError");
colourRed(redFeild);
break;
case (useremail.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/) == false):
redFeild = document.getElementById("email");
colourRed(redFeild);
redFeild = document.getElementById("emailError");
colourRed(redFeild);
break;
default:
emailV = true;
greenField = document.getElementById("email");
colourGreen(greenField);
greenField = document.getElementById("emailError");
colourGreen(greenField);
break;
}

var usernameV = false;
var username = document.getElementById("usrname").value;

switch (username, usernameV) {
case (username == ""):
redFeild = document.getElementById("user");
colourRed(redFeild);
redFeild = document.getElementById("usernameError");
colourRed(redFeild);
break;
case (username.match(/^[a-zA-Z0-9]+$/) == false):
redFeild = document.getElementById("user");
colourRed(redFeild);
redFeild = document.getElementById("usernameError");
colourRed(redFeild);
break;
default:
usernameV = true;
greenField = document.getElementById("user");
colourGreen(greenField);
greenField = document.getElementById("usernameError");
colourGreen(greenField);
break;
}

var passwordV = false;
var userpsswd = document.getElementById("userPassword").value;
var userpsswdC = document.getElementById("userPasswordConfirm").value;

switch (userpsswd, userpsswdC, passwordV) {
case (userpsswd || userpsswdC == ""):
redFeild = document.getElementById("pass");
colourRed(redFeild);
redFeild = document.getElementById("passC");
colourRed(redFeild);
redFeild = document.getElementById("passwordCError");
colourRed(redFeild);
break;
case (userpsswd.match(/^.*(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*\d).*$/) == false):
redFeild = document.getElementById("pass");
colourRed(redFeild);
redFeild = document.getElementById("passC");
colourRed(redFeild);
redFeild = document.getElementById("passwordError");
colourRed(redFeild);
break;
case (userpsswd != userpsswdC):
redFeild = document.getElementById("pass");
colourRed(redFeild);
redFeild = document.getElementById("passC");
colourRed(redFeild);
redFeild = document.getElementById("passwordError");
colourRed(redFeild);
break;
default:
passwordV = true;
greenField = document.getElementById("pass");
colourGreen(greenField);
greenField = document.getElementById("passC");
colourGreen(greenField);
greenField = document.getElementById("passwordError");
colourGreen(greenField);
break;
}

if (firstV && lastV && emailV && usernameV && passwordV == true) {
return true;
} else {
return false;
}
}

var signup = document.getElementById("signup");

return validateSignup(signup);
</script>
</head>
<body>
<div align="center">
<form id="signup" name="signup" onsubmit="return validateSignup(this.form)" method="get" action="users.php">
<h1>Sign Up</h1>
<label id="first">First Name</label>
<input type="text" id="userFirst">
<br>
<br> <label id="last">Last Name</label>
<input type="text" id="userLast">
<br> <label id="nameError">First name and last name are required and must contain only upper and lower case letters</label>
<br>
<br> <label id="email">Email</label>
<input type="email" id="userEmail">
<br> <label id="emailError">Email is required and must be valid</label>
<br>
<br> <label id="user">Username</label>
<input type="text" id="usrname">
<br> <label id="usernameError">Username is required and must only contain alphanumeric values</label>
<br>
<br> <label id="pass">Password</label>
<input type="password" id="userPassword">
<br> <label id="passwordError">Password is required and must contain at least one uppercase letter, one lowercase letter, and one number</label>
<br>
<br> <label id="passC">Confirm Password</label>
<input type="password" id="userPasswordConfirm">
<br> <label id="passwordCError">Password and confirmed password must be the same</label>
<br>
<br> <input type="submit" text="Sign Up">
</form>
</div>
</body>

最佳答案

 onsubmit="return validateSignup(this.form)"

应该是1

 onsubmit="return validateSignup(this)"
form 元素上的 onxyz-attribute-style 事件处理程序中的

this 是表单;它没有 form 属性。 (这通常是正确的:在 onxyz 属性代码中,this 是属性附加到的元素。)

<小时/>

1 考虑使用现代事件处理,例如addEventListener

关于javascript - JS函数似乎没有被HTML表单执行,不知道为什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40937876/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com