如果表单验证失败，则返回布尔值答案

【问题标题】：Return a boolean value if forms fails validation如果表单验证失败，则返回布尔值
【发布时间】：2022-01-09 02:06:10
【问题描述】：

我有一个任务：

编写一个验证表单内容的 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')
    }
}

    
    <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>

【问题讨论】：

这里可能有一些问题，但是这一行：if (isValid = true){ form.remove; } - 对于比较，您必须使用== 或===（单个= 设置一个值）。此外， form.remove 没有任何意义。你打算怎么做？
我试图通过使用 form.remove 来隐藏 html 表单。是的，您对 === 的看法是正确的，但它仍然不能解决问题
if (isValid) form.remove() 会将其从 DOM 中永久删除。如果您只是想隐藏它（以便稍后再次显示），您可以执行if (isValid) form.setStyle('display', 'none') 之类的操作
@Kinglish 谢谢！我想整个问题都出在那个 form.remove 语句上。现在我已经根据您的建议对其进行了更改，它确实有效。另外，使用 setError/Succes 函数中的布尔值这样做是一种好习惯，还是有更好的方法？
@AndrewMakovii，一个好的解决方案是使用required 来检查空白，如果语句较少

标签： javascript function input boolean

【解决方案1】：

您的代码中有两个错误：

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

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

num 输入类型将只接受数字输入，email 类型输入将检查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@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>

【讨论】：