HTML / Javascript：简单的表单验证提交 [英] HTML/Javascript: Simple form validation on submit

问题描述

我试图用最简单的方式验证我的表单，但不知何故无法正常工作，并且当我单击提交时，它只是将我带到下一个页面而未提供警报消息：

HTML：

 < form name =ff1method =postonsubmit =validateForm（ ）;> 
< input type =textname =emailid =fremailplaceholder =[e-mail]/> 
< input type =textname =titleid =frtitleplaceholder =Title/> 
< input type =textname =urlid =frurlplaceholder =http://yourwebsite.com//> 
< input type =submitname =Submitvalue =Continue/> 
< / form> 
  

Javascript：

 < script type =text / JavaScript> 
 
函数validateURL（url）{
 var reurl = /^(http[s]?:\\\\////{{1,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（请输入一个有效的URL，记得包括http：//）; 
} 
 
 //验证标题
 var title = $（＃frtitle）。val（）; 
 if（title ==|| title == null）{} else {
 alert（请只为您的广告标题输入字母数字值）; 
} 
 
 //验证电子邮件
 var email = $（＃fremail）。val（）; （（/(.+)@(.+){2,}\.(.+){2,}/.test(email））|| email ==|| email = = null）{}其他{
 alert（请输入一个有效的电子邮件）; 
} 
返回false; 
} 
< / script> 
  

这里还有jsfiddle http://jsfiddle.net/CrLsR/

提前致谢

解决方案

你有几个错误。
首先您必须从html标记中的函数返回值：< form name =ff1method =postonsubmit =return validateForm（）;>
$ b

第二个在jsfiddle中，代码放在onLoad中，然后表单不会识别 - 最后你必须从函数返回true验证成功 -
我修正了更新中的一些问题：

https://jsfiddle.net/mj68cq0b/

 函数validateURL（url）{
 var reurl = /^(http[s]?:\/\//{{1,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（请输入一个有效的URL，记得包括http：//）; 
返回false; 
} 
 
 //验证标题
 var title = $（＃frtitle）。val（）; 
 if（title ==|| title == null）{
 alert（请只为您的广告标题输入字母数字值）; 
返回false; 
} 
 
 //验证电子邮件
 var email = $（＃fremail）。val（）; （（/(.+)@(.+){2,}\.(.+){2,}/.test(email））|| email ==|| email = = null）{}其他{
 alert（请输入一个有效的电子邮件）; 
返回false; 
} 
返回true; 
} 
  

I'm trying to validate my form with the easiest way possible, but somehow is not working and when I click submit it just takes me to the next page without giving the alert message:

HTML:

<form name="ff1" method="post" onsubmit="validateForm();">
 <input type="text" name="email" id="fremail" placeholder="[e-mail]" />
 <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>

Here is also in jsfiddle http://jsfiddle.net/CrLsR/

Thanks in advance

解决方案

You have several errors there. first you have to return value from the function in the html markup: <form name="ff1" method="post" onsubmit="return validateForm();">

second in jsfiddle your place the code inside onLoad which then the form won't recognize - and last you have to return true from the function if all validation success - I fixed some issues in the update:

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;
}

这篇关于HTML / Javascript：简单的表单验证提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！