Question

我有一个验证，当 Textfields为空时工作正常。但是当我在Textfield 中输入空格而没有输入任何文字时，绕过验证并提交表单。在这种情况下，如何阻止表单提交？

这是我的JS验证代码：

<script type="text/javascript">
function valid(){
    var flag = "";


    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;


if($("#fname").val()=="")
{
    $("#fname").addClass('errorClass'); 
    $("#fname").focus();
    flag = 1; 
}
else{
    $("#fname").removeClass('errorClass');
}

if($("#lname").val()=="")
{
    $("#lname").addClass('errorClass'); 
    $("#lname").focus();
    flag = 1; 
}
else{
    $("#lname").removeClass('errorClass');
}


if($("#email_address").val() =="" || !$("#email_address").val().match(emailExp)){
    $("#email_address").addClass('errorClass'); flag = 1; 
    }
else{
    $("#email_address").removeClass('errorClass');
    }


if($("#password").val()=="")
{
    $("#password").addClass('errorClass'); 
    flag = 1; 
}
else{
    $("#password").removeClass('errorClass');
}


if($("#cpassword").val()=="" || $("#cpassword").val() != $("#password").val() )
{
    $("#cpassword").addClass('errorClass'); 
    flag = 1; 
}
else{
    $("#cpassword").removeClass('errorClass');
}



    if(flag==1){
    return false;
    }
   else
   {
    return true;   
   }

    }

</script>

以下是我在表单验证时添加类的CSS代码：

<style type="text/css">
.errorClass{
    border:1px solid #F00 !important;
    background-color:#F99 !important;
}
</style>

以下是我的FORM代码HTML代码：

<form id="form2" name="form2" method="post" action="" onSubmit="return valid();">
          <table width="80%" border="0" cellspacing="8">
            <tr>
              <td colspan="2" align="left" valign="middle"><span class="Signup_Text">Sign Up here if you dont have account yet:</span></td>
              </tr>
            <tr>
              <td width="45%" align="left" valign="middle"><input type="text" name="fname" id="fname" placeholder="First Name" class="textfield" /></td>
              <td width="55%" align="left" valign="middle"><input type="text" name="lname" id="lname" placeholder="Last Name" class="textfield" /></td>
            </tr>
            <tr>
              <td align="left" valign="middle"><input type="text" name="email_address" id="email_address" placeholder="Enter Email Address" class="textfield" onBlur="check_email(this.value);" onKeyUp="call_loader(this.value)"/> </td>
              <td align="left" valign="middle">&nbsp;&nbsp; <span id="authentication" class="authentication"></span></td>
              </tr>
            <tr>
              <td align="left" valign="middle"><input type="password" name="password" id="password" placeholder="Enter Password" class="textfield" /></td>
              <td align="left" valign="middle"><input type="password" name="cpassword" id="cpassword" placeholder="Confirm Password" class="textfield" /></td>
            </tr>
            <tr>
              <td align="left" valign="middle"><input type="text" name="dob" id="datepicker" placeholder="Date of Birth" class="textfield" /></td>
              <td align="left" valign="middle">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="2" align="left" valign="middle"><input name="gender" type="radio" class="Radio_Class" id="radio" value="Male" checked="checked" />
                <label for="gender"><strong>Male</strong>
                  <input type="radio" name="gender" id="radio2" value="Female" />
                  <strong>Female</strong></label></td>
            </tr>
            <tr>
              <td align="left" valign="middle">
              <span id="Error1">
              <input type="submit" name="Register2" id="Register2" value="Register" class="login_button1" />
              </span>
              </td>
              <td align="left" valign="middle">&nbsp;</td>
            </tr>
          </table>
        </form>

Answer 1

尝试

 if($.trim($("#lname").val())=="")

完整代码

if($.trim($("#fname").val())=="")
{
    $("#fname").addClass('errorClass'); 
    $("#fname").focus();
    flag = 1; 
}
else{
    $("#fname").removeClass('errorClass');
}

if($.trim($("#lname").val())=="")
{
    $("#lname").addClass('errorClass'); 
    $("#lname").focus();
    flag = 1; 
}
else{
    $("#lname").removeClass('errorClass');
}


if($.trim($("#email_address").val()) =="" || !$("#email_address").val().match(emailExp)){
    $("#email_address").addClass('errorClass'); flag = 1; 
    }
else{
    $("#email_address").removeClass('errorClass');
    }


if($.trim($("#password").val())=="")
{
    $("#password").addClass('errorClass'); 
    flag = 1; 
}
else{
    $("#password").removeClass('errorClass');
}


if($.trim($("#cpassword").val())=="" || $("#cpassword").val() != $("#password").val() )
{
    $("#cpassword").addClass('errorClass'); 
    flag = 1; 
}
else{
    $("#cpassword").removeClass('errorClass');
}



    if(flag==1){
    return false;
    }
   else
   {
    return true;   
   }

    }

Reference

Answer 2

只需使用$.trim()修剪输入的值即可。这将消除String中的任何空格。

if($.trim($("#fname").val()) =="")

Answer 3

请将值转换为ascii并进行比较。您可以参考此问题：Convert character to ASCII code in JavaScript

space的ascii值为32

简单的表单验证 - 验证空格

3 个答案: