使用JavaScript验证表单

时间:2013-03-16 09:49:59

标签: javascript forms validation

我需要使用Javascript验证表单

这是我的表格:

<form name="login" action="#" method="POST" onSubmit="return validasi()">
<div class=log>My Id</div><div class=log><input type="text" name="username"></div>
<div class=log>Password</div><div class=log><input type="password"  name="sandi"></div>
<div class=log><input id="tombol" type="submit" value="Login" ></div>
</form>

...和JS验证:

<script language="javascript">
function validasi(form){
  if (form.username.value == ""){
    alert("Anda belum mengisikan Username.");
    form.username.focus();
    return (false);
    }

  if (form.sandi.value == ""){
    alert("Anda belum mengisikan Password.");
    form.sandi.focus();
    return (false);
    }
  return (true);
    }
</script>

然而,JS不起作用。请帮我解决一下。

3 个答案:

答案 0 :(得分:3)

您应该将表单作为函数的参数。 你提交的代码应该是&#34;返回validasi(this)&#34;  您的HTML代码应该如下所示。

<form name="login" action="#" method="POST" onSubmit="return validasi(this)">
<div class=log>My Id</div><div class=log><input type="text" name="username"></div>
<div class=log>Password</div><div class=log><input type="password"  name="sandi"></div>
<div class=log><input id="tombol" type="submit" value="Login" ></div>
</form>

http://jsfiddle.net/xensoft/x8Vdw/

答案 1 :(得分:2)

onSubmit="return validasi()"未将任何参数传递给validasi(),但validasi()需要参数。

答案 2 :(得分:0)

<form name="login" action="#" method="POST" onSubmit="return validasi();">
<div class=log>My Id</div><div class=log><input type="text" name="username"></div>
<div class=log>Password</div><div class=log><input type="password"  name="sandi"></div>
<div class=log><input id="tombol" type="submit" value="Login" ></div>
</form>

    <script language="javascript">
    function validasi(form){

    var x = document.forms["login"]["username"].value;
    var y = document.forms["login"]["sandi"].value;

      if (x == null || x == ""){
        alert("Anda belum mengisikan Username.");
        return false;
        }

      if (y == null || y == ""){
        alert("Anda belum mengisikan Password.");
        return false;
        }
        }
    </script>