Question

最近开始处理javascript，现在我正在注册页面。现在，通过alert ()显示有关表格填写不正确的通知。如何改善这种情况，以便如果您输入错误，会立即看到提示？

function valid(form){
        var checker = false;
        var namePattern = new RegExp("^([A-z]{4,20})$");
        var passwordPattern = new RegExp("^[A-z0-9]{4,20}$");
        var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
        
        var fName = form.fName.value;
        var lName = form.lName.value;
        var password = form.password.value;
        var confirmPassword = form.confirmPassword.value;
        var email = form.eMail.value;
    
        if(!namePattern.test(fName)){
            checker = "Wrong first name";
        }else if(!namePattern.test(lName)){
            checker = "Wrong last name"
        }else if(!passwordPattern.test(password)){
            checker = "Wrong password"
        }else if(confirmPassword != password){
            checker = "Your passwords do not match"
        }else if(!emailPattern.test(email)){
            checker = "Wrong email"
        }
    
        if(checker){
            alert(checker);
        }
    }

<form action="" method="post" name="submit" onsubmit="valid(this)">
                        <div class="register-top-grid">
                            <h3>PERSONAL INFORMATION</h3>
                            <div>
                                <span>First Name<label>*</label></span>
                                <input type="text" name="fName" id="fName" placeholder="Your first name">
                            </div>
                            <div>
                                <span>Last Name<label>*</label></span>
                                <input type="text" name="lName" placeholder="Your last name">
                            </div>
                            <div>
                                <span>Email Address<label>*</label></span>
                                <input type="text" name="eMail" placeholder="You email">
                            </div>
                            <div class="clear"></div>
                            <a class="news-letter" href="#">
                                <label class="checkbox"><input type="checkbox" name="checkbox" checked="	"><i> </i>Sign
                                    Up for Newsletter</label>
                            </a>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                        <div class="register-bottom-grid">
                            <h3>LOGIN INFORMATION</h3>
                            <div>
                                <span>Password<label>*</label></span>
                                <input type="password" name="password" placeholder="Your password">
                            </div>
                            <div>
                                <span>Confirm Password<label>*</label></span>
                                <input type="password" name="confirmPassword" placeholder="Confirm your password">
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                        <input type="submit" name="submit" value="submit"/>
                    </form>

我将非常感谢您的帮助

Answer 1

我建议您将输入元素放在onchange函数上，例如：

<input type="text" name="fName" id="fName" placeholder="Your first name" onchange='validateInput(e)'>

然后您签入功能：

function validateInput(e){
  var namePattern = new RegExp("^([A-z]{4,20})$");
  const value = e.target.value;

  if(!namePattern.test(value)){
    alert("Wrong first name");
    // But instead of alert I would suggest you change the color of the input element in order for the user to see real time that he is entering wrong thing. 
    //When he enters correct data, input border should be green. This is much more user friendly 
  }
}

Answer 2

您可以像这样分别进行每个验证检查...

function firstname(value){
    var checker = false;
    var namePattern = new RegExp("^([A-z]{4,20})$");
    
    if(!namePattern.test(value)){
        checker = "Wrong first name";
    }

    if(checker){
        alert(checker);
    }
}

<input type="text" name="fName" id="fName" placeholder="Your first name" onblur="firstname(this.value)">

我建议您可以使用jquery验证。

Answer 3

问题是，您正在submit事件（显然是提交表单时触发的事件）中检查表单。

您需要通过某些事件侦听器在每个输入字段上添加输入验证。

如果添加onchange事件监听器，则每次将焦点移到另一个元素（又称为模糊事件）时，都会触发回调验证。

如果添加oninput事件监听器，则每次输入新内容时都会触发回调验证。

我建议您看一下this问题的答案。

Answer 4

var checker;
function valid(form){
    checker = '';
    var namePattern = new RegExp("^([A-z]{4,20})$");
    var passwordPattern = new RegExp("^[A-z0-9]{4,20}$");
    var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");

    var fName = form.fName.value;
    var lName = form.lName.value;
    var password = form.password.value;
    var confirmPassword = form.confirmPassword.value;
    var email = form.eMail.value;

    if(!namePattern.test(fName)){
        checker += "No first name<br/>";
    }
    if(!namePattern.test(lName)){
        checker += "No last name<br/>"
    }
    if(!passwordPattern.test(password)){
        checker += "No password<br/>"
    }
    if(confirmPassword != password){
        checker += "Your passwords do not match<br/>"
    }
    if(!emailPattern.test(email)){
        checker += "No email<br/>"
    }

    if(checker){
        document.getElementById("hint").innerHTML = checker;
    }
}

valid(document.getElementById("form"));

<form id='form' action="return false;" method="post" name="submit" oninput="valid(this)" onsubmit=' return false;'>
                    <div class="register-top-grid">
                        <h3>PERSONAL INFORMATION</h3>
                        <div>
                            <span>First Name<label>*</label></span>
                            <input type="text" name="fName" id="fName" placeholder="Your first name">
                        </div>
                        <div>
                            <span>Last Name<label>*</label></span>
                            <input type="text" name="lName" placeholder="Your last name">
                        </div>
                        <div>
                            <span>Email Address<label>*</label></span>
                            <input type="text" name="eMail" placeholder="You email">
                        </div>
                        <div class="clear"></div>
                        <a class="news-letter" href="#">
                            <label class="checkbox"><input type="checkbox" name="checkbox" checked="    "><i> </i>Sign
                                Up for Newsletter</label>
                        </a>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                    <div class="register-bottom-grid">
                        <h3>LOGIN INFORMATION</h3>
                        <div>
                            <span>Password<label>*</label></span>
                            <input type="password" name="password" placeholder="Your password">
                        </div>
                        <div>
                            <span>Confirm Password<label>*</label></span>
                            <input type="password" name="confirmPassword" placeholder="Confirm your password">
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                    <div style='color:red' id='hint'></div>
                    <input type='submit'/>
                    </form>

使用oninput事件在每次更改输入时运行一次。通过显示文本提示而不是弹出窗口来提高用户友好性，并显示所有错误，而不仅仅是if / elseif循环中的第一个错误。

PS：您似乎忘记了在代码中添加“提交”按钮。

编辑：页面也一加载，也使它检查有效性。

注册期间弹出消息

4 个答案: