0

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

这是我的 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>
4

3 回答 3

3

试试看

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

    }

参考

于 2013-09-12T08:57:32.670 回答
2

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

if($.trim($("#fname").val()) =="")
于 2013-09-12T08:56:54.190 回答
0

请将值转换为 ascii 和 comapre。你可以参考这个问题：Convert character to ASCII code in JavaScript

ascii 值为space32

于 2013-09-12T09:02:26.500 回答