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

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

HTML:

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>

函数validateURL（url）{
var reurl=/^（http[s]？：\/\/）{0,1}（www\.）{0,1}[a-zA-Z0-9\.-]+\.[a-zA-Z]{2,5}[\.]{0,1}/；
返回重新测试（url）；
}
函数validateForm（）
{
//验证URL
var url=$（“#frurl”）.val（）；
if（validateURL（url））{}else{
警报（“请输入有效的URL，记住包括http://”）；
}
//验证标题
var title=$（“#frttitle”）.val（）；
如果（title==“”| | title==null）{}else{
警告（“请仅为广告标题输入字母数字值”）；
}
//验证电子邮件
var email=$（“#fremail”）.val（）；
如果（/（.+）@（.+）{2，}\（.+）{2，}/.test（email））| | email==“”| | email==null）{}其他{
警报（“请输入有效电子邮件”）；
}
返回false；
}

---

在JSFIDLE中，您还需要返回验证函数。比如：

onsubmit="return validateForm();"

---

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

这里有几个错误

首先，您必须从HTML标记中的函数返回一个值：

其次，在JSFIDLE中，您将代码放在onLoad中，然后表单将无法识别它-最后，如果所有验证都成功，您必须从函数返回true-我修复了更新中的一些问题：

---

最简单的验证如下所示：

---

披露：我写了FieldVal

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

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

现场演示：

功能验证表单（数据）{
//这也适用于后端（如果您使用的是Node）
//验证提供的数据
var验证器=新字段VAL（数据）；
验证程序.get（“email”，BasicVal.email（true））；
get（“title”，BasicVal.string（true））；
get（“url”，BasicVal.url（true））；
返回验证器.end（）；
}
$（文档）.ready（函数（）{
//创建表单并添加一些字段
变量形式=新的FVForm（）
.添加_字段（“电子邮件”，新FVTextField（“电子邮件”））
.添加_字段（“标题”，新FVTextField（“标题”））
.add_字段（“url”，新FVTextField（“url”））
.on_提交（函数（值）{
//清除现有错误
form.clear_errors（）；
//使用上面的函数验证输入
var错误=验证形式（值）；
如果（错误）{
//将错误传递到表单中
形式错误（错误）；
}否则{
//使用这里的数据
警报（JSON.stringify（value））；
}
})
form.element.append(
$（“”）。文本（“提交”）
).附于（“主体”）；
//预先填充表单
form.val({
“电子邮件”：user@example.com",
“头衔”：“你的头衔”，
“url”：”http://www.example.com"
})
});

HTML表单元素验证

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

运行函数

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

$（“#validationForm”）。验证({
按钮：“#btnGonder”，
onSubmit:函数（）{
警报（“提交流程”）；
},
未完成：函数（）{
警报（“未完成”）；
},
onError:函数（）{
警报（“错误处理”）；
}
});

---

转到示例并下载。

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

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

请点击此处：

这个工具的好处是，您只需编写一个描述验证规则的JSON对象。不需要像这样排成一行：

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

---

数据验证

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

您不应该依赖Javascript来验证表单。关闭Javascript的人可以输入垃圾。你不应该只依赖Javascript验证，但拥有它也很好…检查你的错误控制台。它应该说

未定义变量：re

或

无法对未定义的
Nice catch:）调用方法“test”），这肯定是问题所在。@jbird您使用的是过时的浏览器吗？1:validateForm函数不应该总是返回false，而应该返回错误。2：验证标题确实有相反的逻辑，即您需要！==而不是==
 <input type=text name="username" data-validate placeholder="Username">