HTML/Javascript:提交时的简单表单验证

Question

我试图以最简单的方式验证我的表单,但不知何故不起作用,当我点击提交时它只是带我到下一页而不给出警告消息:

HTML:

<form name="ff1" method="post" onsubmit="validateForm();">
 <input type="text" name="email" id="fremail" placeholder="your@email.com" />
 <input type="text" name="title" id="frtitle" placeholder="Title" />
 <input type="text" name="url" id="frurl" placeholder="http://yourwebsite.com/" />
 <input type="submit" name="Submit" value="Continue" />         
</form>

使用Javascript:

<script type="text/JavaScript">

function validateURL(url) {
    var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
    return re.test(url);
}

function validateForm()
{
    // Validate URL
    var url = $("#frurl").val();
    if (validateURL(url)) { } else {
        alert("Please enter a valid URL, remember including http://");
    }

    // Validate Title
    var title = $("#frtitle").val();
    if (title=="" || title==null) { } else {
        alert("Please enter only alphanumeric values for your advertisement title");
    }

    // Validate Email
    var email = $("#fremail").val();
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else {
        alert("Please enter a valid email");
    }
  return false;
}
</script>

这里也是jsfiddle http://jsfiddle.net/CrLsR/

提前致谢

Answer 1

你有几个错误.首先,您必须从html标记中的函数返回值:<form name="ff1" method="post" onsubmit="return validateForm();">

第二个在jsfiddle你的地方代码里面的onLoad然后表单将无法识别 - 最后你必须从函数返回true如果所有验证成功 - 我修复了更新中的一些问题:

https://jsfiddle.net/mj68cq0b/

function validateURL(url) {
    var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
    return reurl.test(url);
}

function validateForm()
{
    // Validate URL
    var url = $("#frurl").val();
    if (validateURL(url)) { } else {
        alert("Please enter a valid URL, remember including http://");
        return false;
    }

    // Validate Title
    var title = $("#frtitle").val();
    if (title=="" || title==null) {
        alert("Please enter only alphanumeric values for your advertisement title");
        return false;
    }

    // Validate Email
    var email = $("#fremail").val();
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else {
        alert("Please enter a valid email");
        return false;
    }
  return true;
}

Answer 2

最简单的验证如下:

<form name="ff1" method="post">
  <input type="email" name="email" id="fremail" placeholder="your@email.com" />
  <input type="text" pattern="[a-z0-9. -]+" title="Please enter only alphanumeric characters." name="title" id="frtitle" placeholder="Title" />
  <input type="url" name="url" id="frurl" placeholder="http://yourwebsite.com/" />
  <input type="submit" name="Submit" value="Continue" />         
</form>

它使用HTML5属性(如as pattern)

Javascript:无.

Answer 3

您需要返回验证功能.就像是:

onsubmit="return validateForm();"

然后验证函数应该在错误时返回false.如果一切正常,则返回true.请记住,服务器也必须验证.