javascript - 如何在向服务器发出请求之前强制执行 JavaScript 表单验证？

Question

我尝试了以下代码来实现表单的 javaScript 验证。当有人在没有任何输入的情况下点击 Sign Up 按钮时，div 标签会在浏览器中显示 Enter Your First Name。这正是我应该做的。但是，当有人在没有输入的情况下点击 Sign Up 两次时，该函数不会被调用，而是会发送到服务器。

我想知道要在下面的代码中进行哪些更改以确保用户在将内容发送到服务器之前被迫输入内容。任何帮助将不胜感激。提前致谢。

 <script language="javascript">
            var flag=0;
            function firstname()
            {
                firstname=join.firstname.value;
                if(firstname=="")
                {
                    document.getElementById("errorFname").innerHTML="Enter Your First Name";
                    flag=1;

                }   
              }
      function check(form)
            {
                flag=0;
                firstname();

                if(flag==1)
                    return false;
                else
                    return true;
            }
    </script>

       <form id= "join"  class="form-signUp" name="join" action="http://cs-sun2000.uscupstate.edu/~student1/cgi-bin/echo.cgi" method= "post" onSubmit="return check(this)">

        <div id="errorFname"></div><br><input name="firstname" type="text" placeholder="First Name" onBlur="firstname()" >
<button  name="submit" type="submit" >Sign Up</button>
        </form>

Answer 1

这是因为 firstname 变量，首先分配给一个函数，然后被重用以接收输入值。

当输入为 null 时，firstname 变量设置为 null，并且您的控制台显示错误。 您只需要更改函数名称或字符串变量名称即可。

--- 编辑 --

这是一个working fiddle

var valid;
function checkFirstname() {
  var firstname =join.firstname.value;
  if(!firstname || firstname.trim().length === 0) {
     document.getElementById("errorFname").innerHTML="Enter Your First Name";
     valid=false;
  } else {
      document.getElementById("errorFname").innerHTML="";
  }
}

function check(form) {
  valid=true;
  checkFirstname();
  return valid;
}

我更喜欢检查名字是否存在:如果名字为空，它将失败。 然后我检查 trim 后的长度:如果用户只输入空格，它将失败。