Return 如果表单验证失败则为布尔值

Question

我有一个任务：

编写一个 JS 函数来验证表单的内容 - 表单应该至少有一个必填的数字字段和一个不能为空的字段。如果验证未通过该字段，则显示相应的信息以告知用户。如果验证失败，函数应该 return false，否则为 true

因此，如果 from 验证失败并随后隐藏表单，我会尝试 return 一个布尔值。我已将布尔值放入错误和成功函数中，但它似乎不起作用。我试图将检查输入函数 return 设置为布尔值，但它也不起作用。

我只是在努力学习，所以任何有关逻辑上解决此问题的最佳方法的帮助将不胜感激。我也知道可能存在简单的语法问题，但这也是我现在正在努力改进的地方。

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')
    }
}

    
    <div class="container">
        <div class="header">
            <h2>Create Account</h2>
        </div>
        <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"/>
                <small>Error message</small>
            </div>
            <div class="form-control">
                <label for="phone">Phone number</label>
                <input type="tel" 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" placeholder="email@youremail.com" id="email" />
                <small>Error message</small>
            </div>
            <div class="form-control">
                <label for="password">Password</label>
                <input type="password" placeholder="Password" id="password"/>
                <small>Error message</small>
            </div>
            <div class="form-control">
                <label for="passsword2">Password check</label>
                <input type="password" placeholder="Repeat your password" id="password2"/>
                <small>Error message</small>
            </div>
            <button class="form-button" >Submit</button>
        </form>
    </div>

Answer 1

您的代码中有两个错误：

使用remove()而不是删除
使用== / ===代替=

此外，您可以使用required让用户无法提交。

num输入类型只接受数字输入，email类型输入会检查input中是否有@。这将节省大量 if 不必要的 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@youremail.com" 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>

Return 如果表单验证失败则为布尔值

Return a boolean value if forms fails validation

javascript

boolean

input

function