Question

我想在Sign Up字段的email页面中应用验证，下面是Sign Up页面：

<%= form_for(@user,:html => {:id => "signup"}) do |f| %>
<table style="margin-left:30px;font-size:medium" border="1">
    <tr>
      <td style="font-size:15px">
        Email
      </td>
      <td>
        <%= f.text_field :email,:style => "font-size:medium", :id => "tf_email" %>
      </td>
      <td width="">
        <label for="validation_pw" id="errormessage1" visible="false" style="color:red; font-size:x-small;">
      </td>
    </tr>
      <tr>
          <td>
            <br/>
          </td>
          <td style="text-align:left;">
            <%= f.submit "Login", class: "btn btn-large btn-primary", :style => "font-size:12px;" %>
          </td>
      </tr>
</table

以下是电子邮件字段的jquery验证功能：

<script type="text/javascript">
  $("#signup").submit(function ( event ) {
    alert("Hassan");
    var email = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    var hasError = false;
    var inp_email = $("#tf_email").val();
    if(!email.test(inp_email))
    {
      var message = $("#errormessage1").html("Enter your email address");
      message.show();
      hasError = true; 
    }
    else
    {
      hasError = false;
      $("#errormessage1").empty().hide();
    }
    }
  });
</script>

它的工作正常并显示验证但它在页面刷新后消失，并且每当我输入有效的电子邮件地址时页面上都不稳定。请建议我，等待回复。

由于

Answer 1

当您点击提交时，它会尝试将相应的表单发布到服务器并重新加载页面。

你必须使用

event.preventDefault();

或

return false;

如果要显示错误消息。

Answer 2

首先，您需要在检查电子邮件字段后使用return true或false，还要删除一个未打开的额外闭合支撑

$("#signup").submit(function ( event ) {
    .....
    if(!email.test(inp_email))
    {
        var message = $("#errormessage1").html("Enter your email address");
        message.show();
        hasError = true; 
    }
    else
    {
        hasError = false;
        $("#errormessage1").empty().hide();
    }
    return ! hasError;// used !, if valid then true else return false;
    //} remove it it is an extra brace, which is not opened
});

如果您想在刷新页面时显示错误，请尝试使用localStorage进行验证，并在页面加载时检查localstorage是否有错误值，然后再次验证您的表单，

<script type="text/javascript">

    function checkValidity(){
        alert("Hassan");
        var email = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        var hasError = false;
        var inp_email = $("#tf_email").val();
        if(!email.test(inp_email) || (localStorage.getItem('hasError') && localStorage.getItem('hasError')==true))
        {
           var message = $("#errormessage1").html("Enter your email address");
           message.show();
           hasError = true; 
           localStorage.setItem('hasError',true);
        }
        else
        {
           hasError = false;
           localStorage.setItem('hasError',false);
           $("#errormessage1").empty().hide();
        }
    }
    $(function(){
       $("#signup").submit(function ( event ) {
          checkValidity();
       });
       checkValidity();
    });
</script>

使用jquery刷新页面后验证消失

2 个答案: