我有一個任務：
撰寫一個驗證表單內容的 JS 函式 - 表單應該至少有一個必填數字欄位和一個不能為空的欄位。如果驗證未通過該欄位，則顯示適當的資訊以通知用戶。如果驗證失敗，該函式應該回傳 false，否則回傳 true
因此，如果 from 驗證失敗并隨后隱藏表單，我將嘗試回傳一個布林值。我已將布林值放入錯誤和成功函式中，但它似乎不起作用。我試圖讓檢查輸入函式回傳布林值，但它也不起作用。
我只是想學習，所以任何關于邏輯上解決這個問題的最佳方法的幫助都將不勝感激。我也明白可能存在簡單的語法問題，但這也是我現在正在努力改進的事情。
const form = document.getElementById('form');
const username = document.getElementById('username');
const num = document.getElementById('num');
const phone = document.getElementById('phone');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
let isValid;
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
if (isValid = true){
form.remove;
}
});
function checkInputs() {
const usernameValue = username.value.trim();
const numValue = num.value.trim();
const phoneValue = phone.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
if(usernameValue === '') {
setErrorFor(username, 'Username cannot be blank');
} else {
setSuccessFor(username);
}
if(numValue === ''){
setErrorFor(num, 'You must have a favorite number');
}else if(isNaN(numValue)){
setErrorFor(num, 'Not a number');
}else{
setSuccessFor(num);
}
if(phoneValue === ' 48' || phoneValue === ''){
setErrorFor(phone, 'Phone cannot be blank');
}else{
setSuccessFor(phone);
}
if(emailValue === '') {
setErrorFor(email, 'Email cannot be blank');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Not a valid email');
} else {
setSuccessFor(email);
}
if(passwordValue === '') {
setErrorFor(password, 'Password cannot be blank');
}else if (passwordValue.length < 8){
setErrorFor(password, 'Password cannot be less than 8 characters');
} else {
setSuccessFor(password);
}
if(password2Value === '') {
setErrorFor(password2, 'Password cannot be blank');
} else if(passwordValue !== password2Value) {
setErrorFor(password2, 'Passwords does not match');
} else{
setSuccessFor(password2);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
isValid = false;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
isValid = true;
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\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,}))$/.test(email);
}
function test(){
if (isValid = true){
console.log('hi')
} else{
console.log('HEXYU')
}
}
這是html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Form A</title>
</head>
<body>
<div >
<div >
<h2>Create Account</h2>
</div>
<form id="form" >
<div >
<label for="username">Username</label>
<input type="text" placeholder="Your username" id="username" />
<small>Error message</small>
</div>
<div >
<label for="num">Your favorite number</label>
<input type="number" placeholder="Your favorite number" id="num"/>
<small>Error message</small>
</div>
<div >
<label for="phone">Phone number</label>
<input type="tel" placeholder="Your phone numbe" id="phone" value=" 48"/>
<small>Error message</small>
</div>
<div >
<label for="email">Email</label>
<input type="email" placeholder="[email protected]" id="email" />
<small>Error message</small>
</div>
<div >
<label for="password">Password</label>
<input type="password" placeholder="Password" id="password"/>
<small>Error message</small>
</div>
<div >
<label for="passsword2">Password check</label>
<input type="password" placeholder="Repeat your password" id="password2"/>
<small>Error message</small>
</div>
<button >Submit</button>
</form>
</div>
<script src="a.js"></script>
</body>
</html>
uj5u.com熱心網友回復：
您的代碼中有兩個錯誤：
- 使用
remove()而不是洗掉 - 使用
==/===代替=
此外，您可以使用required讓用戶無法提交。
numinput type 將只接受數字輸入，并且emailtype 輸入將檢查 . 中是否有 @ input。這將節省大量不必要的 if 陳述句。
const form = document.getElementById('form');
const username = document.getElementById('username');
const num = document.getElementById('num');
const phone = document.getElementById('phone');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
let isValid;
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
if (isValid = true){
form.remove();
}
});
function checkInputs() {
const phoneValue = phone.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
setSuccessFor(username);
setSuccessFor(num);
setSuccessFor(email);
}
if(phoneValue === ' 48' ){
setErrorFor(phone, 'Phone cannot be blank');
}else{
setSuccessFor(phone);
}
if (passwordValue.length < 8){
setErrorFor(password, 'Password cannot be less than 8 characters');
} else {
setSuccessFor(password);
}
if(passwordValue !== password2Value) {
setErrorFor(password2, 'Passwords does not match');
} else{
setSuccessFor(password2);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
isValid = false;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
isValid = true;
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\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,}))$/.test(email);
}
function test(){
if (isValid == true){
console.log('hi')
} else{
console.log('HEXYU')
}
}<form id="form" class="form">
<div class="form-control">
<label for="username">Username</label>
<input type="text" placeholder="Your username" id="username" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="num">Your favorite number</label>
<input type="number" placeholder="Your favorite number" id="num" required />
<small>Error message</small>
</div>
<div class="form-control">
<label for="phone">Phone number</label>
<input type="tel" required placeholder="Your phone numbe" id="phone" value=" 48"/>
<small>Error message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="email" required placeholder="[email protected]" id="email" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" required placeholder="Password" id="password"/>
<small>Error message</small>
</div>
<div class="form-control">
<label for="passsword2">Password check</label>
<input type="password" required typeplaceholder="Repeat your password" id="password2"/>
<small>Error message</small>
</div>
<button class="form-button" >Submit</button>
</form>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/406385.html
標籤：