如何使用 javascript 驗證輸入
[英]How to validate inputs with javascript
問題描述
我正在嘗試使用 javascript 驗證輸入，而不使用required或max-length或min-lenght屬性這是我的 html 代碼：
<!DOCTYPE HTML>
<html>
<head>
<title>Reset your password</title>
<link rel="shortcut icon" href="images.jpeg"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="responsive.css"/>
<script type="text/javascript" src="source.js"></script>
</head>
<body>
<center><form method="POST" id="form" action="/sucess">
<h1>Reset your password</h1>
<p id="warning_1"><b>Warning:</b> Passwords longer than 16 characters <br>cannot be used with the Xbox 360</p>
<input type="text" name="email" id="email" placeholder="Email Adress">
<div class="fill_field" id="fill_field_1">
<p>Please fill out this field</p>
</div>
<div class="minium_8_characters" id="minium_8_characters_1">
<p>Minium 8 characters</p>
</div>
<div class="cant_contain_space" id="cant_contain_sp
ace_1">
<p>Can't contain space</p>
</div>
<input type="password" name="old_password" id="old_password" placeholder="Old password">
<i></i>
<div class="fill_field" id="fill_field_2">
<p>Please fill out this field</p>
</div>
<div class="minium_8_characters" id="minium_8_characters_2">
<p>Minium 8 characters</p>
</div>
<div class="cant_contain_space" id="cant_contain_space_2">
<p>Can't contain space</p>
</div>
<input type="password" id="new_password" placeholder="New password">
<i></i>
<div class="fill_field" id="fill_field_3">
<p>Please fill out this field</p>
</div>
<div class="minium_8_characters" id="minium_8_characters_3">
<p>Minium 8 characters</p>
</div>
<div class="cant_contain_space" id="cant_contain_space_3">
<p>Can't contain space</p>
</div>
<p id="warning_2">8-character minimum; case sensitive</p>
<input type="password" id="confirm_password" placeholder="Reenter password">
<i></i>
<div class="fill_field" id="fill_field_4">
<p>Please fill out this field</p>
</div>
<div class="minium_8_characters" id="minium_8_characters_4">
<p>Minium 8 characters</p>
</div>
<div class="cant_contain_space" id="cant_contain_space_4">
<p>Can't contain space</p>
</div>
<div id="error">
<p>Password did not match</p>
</div>
<button type="button">Cancel</button>
<button type="button" onclick="validate()">Next</button>
</form></center>
</body>
</html>
Css 代碼：
*{
margin:0;
padding:0;
}
@font-face {
font-family: Mundo Sans Std Light;
src: url(./mundo_sans_std_light.otf)
}
#form{
width:80%;
position:absolute;
top:40%;
left:50%;
transform: translate(-50%,-40%);
}
label{
font-size:19pt;
color:#9a9a9a;
padding-left:19px;
padding-top:5px;
}
h1{
color:#5d5a67;
font-size:28pt;
/*margin-top:100px;*/
font-family: Mundo Sans Std Light;
}
#warning_1 {
font-size:14pt;
margin-top:30px;
}
input {
display:block;
width:50%;
height:27px;
margin-top:30px;
padding-left:5px;
border:2px solid #a0a0a0;
outline:none;
}
#old_password{
margin:0;
margin-top:15px;
}
input:focus{
border:2.5px solid #0971de;
}
#warning_2{
color:#1C1C1C;
font-size:10.5pt;
padding-top:15px;
}
.fill_field {
display:none;
width:50%;
height:27px;
margin-top:30px;
border:2px solid transparent;
}
.fill_field p{
padding-top:2.5px;
text-align:left;
color:#ff4040;
}
.minium_8_characters{
display:none;
width:50%;
height:27px;
margin-top:15px;
border:2px solid transparent;
}
.minium_8_characters p{
padding-top:2.5px;
text-align:left;
color:#ff4040;
}
.cant_contain_space {
display:none;
width:50%;
height:27px;
margin-top:15px;
border:2px solid transparent;
}
.cant_contain_space p{
padding-top:2.5px;
text-align:left;
color:#ff4040;
}
#error{
display:none;
width:50%;
height:27px;
margin-top:30px;
border:2px solid transparent;
}
#error p{
padding-top:2.5px;
text-align:left;
color:#ff4040;
}
button{
width:220px;
height:30px;
border:0;
margin-top:60px;
color:black;
background:#c8c8c8;
}
我需要的？
伙計們，我想當輸入為空時， fill_field div 有一個顯示塊，當輸入少於 8 個字符時， minium_8_characters div 有一個顯示塊，如果輸入有空間，div cant_contain_space現在有顯示塊，並且如果輸入超過 8 個字符，除非它有空格，這些 div 的顯示必須是無，我想用 javascript 驗證所有這些輸入，但我不能這樣做，我還有 1 周的時間遇到這個問題並且我根本解決不了。 並且該按鈕是 Button 類型而不是提交，因為提交表單的 function 是我用 javascript 創建的，但它缺少 function 來驗證，我如何在不編寫一千行代碼的情況下進行此驗證？
注意：請注意，對於每個輸入，我在上面提到的 div 上放置了不同的 id。
1 個解決方案
解決方案1
0 2021-10-07 03:42:53
也許你可以試試
記者：
function validateMe() {
let input = document.forms["formName"]["name"].value;
if (input == "") {
// YOU HANDLE CODE FOR INVALID CASE GOES HERE
return false;
}
}
HTML：
<form name="formName" action="/action_page.php" onsubmit="return validateMe()" method="post">
Name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
按下按鈕時如何使用javascript驗證輸入中的數字？
[英]How to validate number in inputs with javascript when pressing button?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.