HTML/JavaScript：提交时的简单表单验证答案

【问题标题】：HTML/JavaScript: Simple form validation on submitHTML/JavaScript：提交时的简单表单验证
【发布时间】：2013-04-14 14:59:06
【问题描述】：

我正在尝试用最简单的方法验证我的表单，但不知何故它不起作用，当我点击提交时，它只是将我带到下一页而不给出警告消息：

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>

这里也在jsfiddlehttp://jsfiddle.net/CrLsR/

【问题讨论】：

您不应该依赖 Javascript 来验证表单。关闭 Javascript 的人将能够输入垃圾邮件。
你不应该只依赖 JavaScript 验证，但拥有它也很好......
检查您的错误控制台。它应该说类似Undefined variable: re 或could not call method "test" on undefined

标签： javascript html forms validation

【解决方案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;
}

【讨论】：

1：您的 validateForm 函数不应总是返回 false，而应仅返回错误。 2：验证标题确实有相反的逻辑，即你需要 !== 而不是 ==

【解决方案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 attributes（如pattern）。

JavaScript：无。

【讨论】：

@jbird 您是否使用过时的浏览器？

【解决方案3】：

您需要返回验证函数。比如：

onsubmit="return validateForm();"

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

【讨论】：

不错 :) 这绝对是问题所在。

【解决方案4】：

披露：我写了 FieldVal。

这是使用FieldVal 的解决方案。通过使用 FieldVal UI 构建表单，然后使用 FieldVal 验证输入，您可以将错误直接传递回表单。

您甚至可以在后端运行验证代码（如果您使用的是Node.js）并在表单中显示错误，而无需手动连接所有字段。

现场演示：http://codepen.io/MarcusLongmuir/pen/WbOydx

function validate_form(data) {
    // This would work on the back end too (if you're using Node)

    // Validate the provided data
    var validator = new FieldVal(data);
    validator.get("email", BasicVal.email(true));
    validator.get("title", BasicVal.string(true));
    validator.get("url", BasicVal.url(true));
    return validator.end();
}


$(document).ready(function(){

    // Create a form and add some fields
    var form = new FVForm()
    .add_field("email", new FVTextField("Email"))
    .add_field("title", new FVTextField("Title"))
    .add_field("url", new FVTextField("URL"))
    .on_submit(function(value){

        // Clear the existing errors
        form.clear_errors();

        // Use the function above to validate the input
        var error = validate_form(value);

        if (error) {
            // Pass the error into the form
            form.error(error);
        } else {
            // Use the data here
            alert(JSON.stringify(value));
        }
    })

    form.element.append(
        $("<button/>").text("Submit")
    ).appendTo("body");

    //Pre-populate the form
    form.val({
        "email": "user@example.com",
        "title": "Your Title",
        "url": "http://www.example.com"
    })
});

【讨论】：

【解决方案5】：

HTML 表单元素验证

运行函数

<script>
    $("#validationForm").validation({
         button: "#btnGonder",
         onSubmit: function () {
             alert("Submit Process");
         },
         onCompleted: function () {
             alert("onCompleted");
         },
         onError: function () {
             alert("Error Process");
         }
    });
</script>

转到示例并下载 https://github.com/naimserin/Validation。

【讨论】：

【解决方案6】：

我使用这个非常简单的小型 JavaScript 库在一行代码中验证完整的表单：

 jsFormValidator.App.create().Validator.applyRules('Login');

在这里查看：jsFormValidator

此工具的好处是您只需编写一个描述您的验证规则的 JSON 对象。没有必要写这样的一行：

 <input type=text name="username" data-validate placeholder="Username">

data-validate 被注入到表单的所有输入字段中，但是当使用 jsFormValidator 时，您不需要这种繁重的语法，并且验证将一次性应用于您的表单，而无需触摸您的 HTML代码。

【讨论】：