JS表单验证（正则表达式或其他）

Question

I have a script here that is supposed to run when triggered. However, it will only work if the variable passwd is not used in my if else statements. NEWLY UPDATED JS:

function validateForm() {
    var name = document.forms["myForm"]["name"].value;
    var phone = document.forms["myForm"]["phone"].value;
    var email = document.forms["myForm"]["email"].value;
    var add = document.forms["myForm"]["address"].value;
    var passwd = document.forms["myForm"]["password"].value;
    var matchesCount = email.split("@").length - 1;
    var matchesCount2 = email.split(".").length - 1;
    var error = "";
    if (!name || !phone || !email || !add || !passwd) {
        error+="All must be filled out \n"

        if(phone.search(/^[0-9]*$/) == -1  || phone.length != 8){
            error+="- Phone number can only contain digits \n";}

        if(passwd.search(/^[0-9a-zA-Z]*$/) == -1){
            error+="- Password needs to be alphanumeric \n";
        }

        if(passwd.length <8 || passwd.length > 16){
            error+="- Password contain only 8-16 digits \n";
        }

        if(matchesCount > 1 || matchesCount2 < 1){
            error+="- Please enter a valid email \n";
        }
        alert(error);
        return false;
    }
}   

HTML

<div id="newaccount">
        <table id="tablenewuser">
                <form name="myForm" action="ControllerServlet" onsubmit="return validateForm()" method="post">
                    <tr>
                        <td class="newusertd">Name:<span class="price">*</span></td>
                        <td class="newusertd"><input style="color: black;" type="text" name="name" class="Btn"></td>
                    </tr>
                    <tr>
                        <td class="newusertd">Contact Number:<span class="price">*</span></td>
                        <td class="newusertd"><input style="color: black;" type="text" name="phone" placeholder="98989898"class="Btn"></td>
                    </tr>
                    <tr>
                        <td class="newusertd">Email:<span class="price">*<br></span></td>
                        <td class="newusertd"><input style="color: black;" type="text" name="email" placeholder="xxx@hello.com" class="Btn"></td>
                    </tr>
                    <tr>
                        <td class="newusertd">Address:<span class="price">*</span></td>
                        <td class="newusertd"><input style="color: black;" type="text" name="address" class="Btn"></td>
                    </tr>
                    <tr>
                        <td class="newusertd">Password:<span class="price">*</span><br>(8-16 Characters with<br>one UPPERCASE & numbers)</td>
                        <td class="newusertd"><input style="color: black;" type="password" name="password" class="Btn">
                    </tr>
                    <tr>
                        <td class="newusertd"></td>
                        <td class="newusertd">
                            <input style="color: black;" type="submit" value="Create Account" class="Btn"/></td>
                    </tr>
                </form> 
        </table>
    </div>

(Sorry for the mess!)

EDIT: The script works but the the password is not working as it should be. Please see the comments

Answer 1

Quick glance shows at least 2 problems with that area:

• passwd could be null and pass through the outer if condition. Attempting length on it would cause an error

  You may want to wrap the inner conditionals in an else block

   if (name == null || name == "" || phone == null || phone == "" || email == null || email == "" || add == null || add == "" || passwd == null || passwd == "") { error+="All must be filled out \\n"; } else { // other conditions } if (error) alert(error); 

• In JS, it's passwd.length not length()

You should use the JS console to verify what errors are appearing.

Answer 2

I see the problem, .length is a property, not a method. Your length check should be:

if (passwd.length >= 8 && passwd.length <= 16) {
     error += "- Only 8-16 digits \n";
}

One more note, foo == null || foo == "" foo == null || foo == "" can be simplified to !foo as null and "" are both falsy values in JS.

Answer 3

Im not expert but i recommend you evaluate mail field with regex ( /^([\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4})?$/ ) and i created a separated function for validate each of the values in the form for add a text error, then another validation who evaluate if all the fiels pass the evaluation, like yours but i made it liek that: if(validateName(nameVar) && validateEmail(emailVar) this is all the code that i made, that validate a correct form mail, a name with alphabetical form and phone without null value:

function validateName(nameVar) {
  var nameReg = /^[a-zA-Z'.\s]{1,40}$/;
  return nameReg.test(nameVar);
}
function validateEmail(emailVar) {
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  return emailReg.test(emailVar);
}

function email() {
    var nameVar = $('#name').val();
    var emailVar = $('#email').val();
    var phoneVar = $('#phone').val();
    var messageVar = $('#message').val();
    if(!validateName(nameVar) ) {
        console.log("dentro");
        $('#nameError').text("Por favor ingresa un nombre valido");
    }else{
        $('#nameError').text("");

    }
    if(!validateEmail(emailVar) || emailVar == "") {
        $('#emailError').text("Por favor ingresa un correo valido");
    }else{
        $('#emailError').text("");
    }
    if(phoneVar == "") {
        $('#phoneError').text("Por favor ingresa un número telefonico");
    }else{
        $('#phoneError').text("");
    }
    if(validateName(nameVar) && validateEmail(emailVar) && emailVar != "" && phoneVar != ""){
            var data = {};
            data.name = nameVar;
            data.email = emailVar;
            data.phone = phoneVar;
            data.message = messageVar;
            //here your validate code with array of values ready for doing something
    }
};

and this is the html code:

<h4 class="title-yellow contacto" id="title-yellow">Envianos un mensaje</h4>
                            <div class="row">&nbsp;</div>
                                    <div class="row">
                                        <div class="col-md-6 form-group">
                                            <input class="form-control" id="name" name="nombre" placeholder="Nombre" type="text" required >
                                        </div>

                                        <div class="col-md-6 form-group">
                                            <input class="form-control" id="email" name="email" placeholder="Email" type="email" required >
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 form-group">
                                            <input class="form-control" id="phone" name="telefono" placeholder="Tel&eacute;fono" type="tel" required >
                                        </div>
                                    </div>
                                    <textarea class="form-control" id="message" name="mensaje" placeholder="Mensaje" rows="4">
                                    </textarea>
                                    <br>
                                    <div class="row">
                                        <div class="col-md-12 form-group">

                                            <button class="email nohover pull-right" id="mail" onclick="email()">ENVIAR</button>
                                            <p id="demo"></p>
                                            <div id="nameError"></div>
                                            <div id="emailError"></div>
                                            <div id="phoneError"></div>
                                            <div id="ajaxMessage"></div>       
                                        </div>




                                    </div>