Question

目前，当新用户在我的网站注册时，他们必须填写一些表格。如果他们的密码太短，不匹配，他们没有填写所有字段，或任何其他错误，我想提醒他们。目前它没有提醒他们，所以我转而确认。这不起作用，所以我考虑使用showModalDiaglog。这也没有用，我没有想法。我目前有这个：

HTML

<form>
    First Name:<br/> <input id="firstname"/><br/>
    Last Name: <br/> <input id="lastname"/><br/>
    Age:       <br/> <input id="age"/><br/>
    Your Email:<br/> <input id="email"/><br/>
    Username:  <br/> <input id="username"/><br/>
    Password:  <br/> <input id="password"/><br/>
    Confirm Password:<br/> <input type="password" id="passwordconfirm"/><br/>
    <br/>
    <button size=20 onClick='getRegistrationFields()'>Submit</button>
  </form>

的JavaScript

function getRegistrationFields() {
var first = document.getElementById("firstname").value;
var last = document.getElementById("lastname").value;
var email = document.getElementById("email").value;
var age = document.getElementById("age").value;
var username = document.getElementById("username").value;
var password = document.getElemetnById("password").value;
var confirm = document.getElementById("passwordconfirm").value;
var empty = "";

if ((first === empty) || (last === empty) || (email === empty) || (age === empty)
    || (username === empty) || (password === empty) || (confirm === empty)) {
    var message = "Not all of the fields are filled out";
    prompt(message);
    //showModalWindow("fields");
    return false;
   }

else {
   age = parseInt(age);

   if (password.length < 10) {
        var message2 = "Password must be at least 10 characters long";
        prompt(message2);
        //showModalWindow("passwordlength");
        return false;
       } 

   else if (password != confirm) {
        var message3 = "Passwords Do not match";
        prompt(message3);
        //showModalWindow("passwordmatch");
        return false;
       }

   else if (age < 18) {
        var message4 = "You must be older to register for this software.";
        prompt(message4);
        //showModalWindow("young");
        return false;
       }

   else {
        var message5 = "All of the fields are correct. We will be processing your request";
        prompt(message5);
        //showModalWindow("success");
        return true;
       }
  }
}

function showModalWindow(fileName) {
   window.showModalDialog("alerts/" + url + ".html", "", "resizable: no; height: 150;   width: 350;");
}

Answer 1

尝试

HTML：

<button size="20" id="btn_submit">Submit</button>

JS：

var btn_submit = document.getElementById("btn_submit");
btn_submit.onclick = getRegistrationFields;

Answer 2

有一个拼写错误：

var password = document.getElemetnById("password").value;

你写了getElemetnById而不是getElementById。

Answer 3

让自己轻松自如。

  <input type="password" class="password" />
    <input type="text"  class="age" />
    <script type="text/javascript">
        !(function () {
            var txBxs = document.querySelectorAll('input[type=textbox]'),
                i = txBxs.length;
            while (i--) {
                tkBxs[i].onchange = textBoxCheck;
            };
        }());
        //
        function textBoxCheck() {
            //
            switch (this.class) {
                //
                case 'password':
                    if (this.value.length < 10)
                    { alert('Password to short'); };
                    break;
                    //

                case 'age':
                    if (+this.value < 18)
                    { alert('To young kiddo!'); };
                    break;
            };
        };
    </script>

JavaScript警报/确认错误

3 个答案: