Question

我正在学习更多关于PHP / Javascript，尝试建立一个基本网站。我已经完成并运行了，但是没有注册和诸如此类的验证。我在提交表单之前尝试使用Javascript来验证表单，但它对我不起作用。这是我的页面：

<script language="JavaScript" type="text/javascript">
OK = false;
function validateEmail() {
    var x = document.forms["form1"]["myemail"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if(atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
        alert("Not a valid e-mail address");
        return false;
    }
}

function notShortUsername() {
    var x = document.forms["form1"]["myusername"].value;
    if(x.value.length < 6) {
        // set the focus to this input
        OK = false;
    }
    OK = true;
}

function notShortPassword() {
    var x = document.forms["form1"]["mypassword"].value;
    if(x.value.length < 6) {
        alert(helperMsg);
        elem.focus();
        // set the focus to this input
        OK = false;
    }
    OK = true;
}

function validate () {
    notShortUsername();
    notShortPassword();
    validateEmail();

    if(OK) {
        form.submit();
        return true;
    } else {
        //do something else
        alert("You did it wrong!");
        return false;
    }
} 
</script>

<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
  <tr>
  <form name="form1" method="post" action="registervalidation.php" onsubmit="return validate">
    <td>
      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
        <tr>
          <td colspan="3"><strong>Member Login </strong></td>
        </tr>
        <tr>
          <td width="78">Username</td>
          <td width="6">:</td>
          <td width="294">
            <input name="myusername" type="text" id="myusername" />
          </td>
        </tr>
        <tr>
          <td>Password</td>
          <td>:</td>
          <td>
            <input name="mypassword" type="password" id="mypassword" />
          </td>
        </tr>
        <tr>
          <td>Email</td>
          <td>:</td>
          <td>
            <input name="myemail" type="text" id="myemail">
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>
            <input type="submit" name="Submit" value="Complete Registration">
            <input type="submit" name="Submit" value="Cancel">
          </td>
        </tr>
      </table>
    </td>
  </form>
  </tr>
</table>

我也尝试过使用它：http://docs.jquery.com/Plugins/Validation

它的问题是它不会在项目失去焦点时进行验证，并且仍然会提交php。

Answer 1

onsubmit="return validate();"

不忘记();

Answer 2

改变这个：

var x = document.forms["form1"]["myusername"].value;
if(x.value.length < 6) {

为：

var x = document.forms["form1"]["myusername"].value;
if(x.length < 6) {

和此：

var x = document.forms["form1"]["mypassword"].value;
if(x.value.length < 6) {

为：

var x = document.forms["form1"]["mypassword"].value;
if(x.length < 6) {

在每种情况下，var x已包含该值，因此您可以直接通过x.length获取长度

Answer 3

在表格提交之外测试您的验证功能：

<a href="#" onclick="validate();">test</a>

您会在控制台中看到错误，告知您x未定义。

未捕获的TypeError：无法读取未定义的属性“长度”

因此脚本停止执行并且永远不会返回false，这允许表单发布。

在提交到php文件之前Javascript没有运行

3 个答案: