如何使用Javascript进行验证？_Javascript_Html_Validation

如何使用Javascript进行验证？

javascript html validation

如何使用Javascript进行验证？,javascript,html,validation,Javascript,Html,Validation,多亏了这么多的工作，我对JavaScript完全感到困惑。我尝试了很多东西，但我的表格一次也没有得到验证。我必须使用纯JavaScript来： **验证电子邮件-电子邮件必须有@，域名应为yahoo.com 电话号码：必须正好包含10位数字年龄：必须是小于120的正数验证应在用户提交表单时进行。如果上述任何验证失败，相应字段应以红色突出显示如果验证成功，页面应重定向到** 我不是在寻找一个能给我确切答案的人，而是要把我推向正确的方向，因为我对JS有基本的了解 <!DOCTYP

多亏了这么多的工作，我对JavaScript完全感到困惑。我尝试了很多东西，但我的表格一次也没有得到验证。我必须使用纯JavaScript来：

**验证电子邮件-电子邮件必须有@，域名应为yahoo.com

电话号码：必须正好包含10位数字

年龄：必须是小于120的正数

验证应在用户提交表单时进行。如果上述任何验证失败，相应字段应以红色突出显示

如果验证成功，页面应重定向到**

我不是在寻找一个能给我确切答案的人，而是要把我推向正确的方向，因为我对JS有基本的了解

    <!DOCTYPE HTML>

<div id="form">

<form name="myForm" action="http://fsu.edu" onsubmit="return validateForm()" method="post">

<head>

<link rel="stylesheet" HREF="C:\Users\Neshia\Desktop\CGS3066\Form Validation Style Sheet.css" TYPE="text/css">

<script>

 function ValidatemyForm()
 {
 var email = document.myForm.email;
 var phone = document.myForm.phonenumber;
 var age = document.myForm.age;
 }

 {
 age = age.replace(/[^0-9]/g, '');
if(age.length != 10) 
{ 
   alert("not 10 digits");
} 
else {
  alert("yep, its 10 digits");
} 
}


 </script>


 </head>

<div id="header">

<hr id="HR1">

<h1> Web Programming: Assignment 3 </h1>

<p> Form Validation with Javascript </p>

<hr id="HR2">

</div>

 <div id="input">

First name: <br>
<input type="text" name="firstname">

<br>

Last name: <br>
<input type="text" name="lastname">

<br>

FSU Email: <br>
<input type= "text" name="email">

<br>

Phone No.: <br>
<input type="numbers" name="phonenumber">

<br>

Age: <br>
<input type="numbers" name="age">

</div>

<hr id="HR3">

<br>

<div id="Sex">

Sex: <br>
    <input type="radio" name="sex" value="male"> Male

<br>

    <input type="radio"  name="sex" value="female"> Female

<br>

    <input type="radio" name="sex" value="other"> Other

</div>

<hr id="HR32">

<div id="languages">

Programming languages you want to learn: <br>

    <input type="checkbox" name="python" value="python"> Python

<br>

    <input type="checkbox" name="java" value="java"> Javascript

<br>

    <input type="checkbox" name="C++" value="C++"> C++

<br>

    <input type="checkbox" name="lisp" valie="lisp"> Lisp

</div>

<hr id="HR32">

<div id="submit">

<input type="Submit" value="Submit">

</div>

<hr id="HR12">


</form>
</div>


函数ValidatemyForm（）
{
var email=document.myForm.email；
var phone=document.myForm.phonenumber；
var age=document.myForm.age；
}
{
年龄=年龄。替换（/[^0-9]/g'，）；
如果（年龄长度！=10）
{ 
警报（“非10位”）；
} 
否则{
警报（“是的，它的10位数”）；
} 
}

网络编程：作业3
使用Javascript进行表单验证

名字：



姓氏：



FSU电子邮件：



电话号码：



年龄：




性别：

男性


女性


其他

您想学习的编程语言：

python


Javascript


C++


口齿不清


函数checkEmail（）{
var email=document.getElementById（'txtEmail'）；
变量过滤器=/^（[a-zA-Z0-9\.\-]）+\@（[a-zA-Z0-9\-]）+\）+（[a-zA-Z0-9]{2,4}）+$/；
如果（！filter.test（email.value））{
警报（“请提供有效的电子邮件地址”）；
email.focus；
返回false；
}
}

您可能会好奇地注意到，html5现在验证了其中一些表单，因此您不需要使用Javascript

看

你问了电子邮件、年龄和电话

考虑以下示例：

你有一些问题。首先，表单的“onsubmit”属性中列出的函数与javascript函数不匹配。你的{}大括号也有一些问题。修复后，请确保在表单元素之后调用.value以获取输入值，即（document.myForm.email.value）

以下是代码和一些修复程序：

<form name="myForm" onsubmit="return validateForm()" method="post">

<head>

<link rel="stylesheet" HREF="C:\Users\Neshia\Desktop\CGS3066\Form Validation Style Sheet.css" TYPE="text/css">

<script>

 function validateForm() {
  var email = document.myForm.email.value;
  var phone = document.myForm.phonenumber.value;
  var age = document.myForm.age.value;
  console.log(age)

  var okToSubmit = true;
  age = age.replace(/[^0-9]/g, '');
  if (age.length != 10) { 
    alert("not 10 digits");
    okToSubmit = false;
  } else {
    alert("yep, its 10 digits");
  }

  if (age > 120 || age < 0) {
    alert("Must be a positive number less than 120");
    okToSubmit = false;
  }

  return okToSubmit;
}


函数validateForm（）{
var email=document.myForm.email.value；
var phone=document.myForm.phonenumber.value；
var age=document.myForm.age.value；
console.log（年龄）
var-okToSubmit=true；
年龄=年龄。替换（/[^0-9]/g'，）；
如果（年龄长度！=10）{
警报（“非10位”）；
okToSubmit=假；
}否则{
警报（“是的，它的10位数”）；
}
如果（年龄>120 | |年龄<0）{
警报（“必须是小于120的正数”）；
okToSubmit=假；
}
返回okToSubmit；
}

另一个可能有用的方法是在浏览器中打开javascript控制台，并通过键入“validateForm（）；”在控制台中手动运行函数

顺便说一句，HTML5中不推荐使用

，请不要使用它，而是使用CSS。@Arjun，.@zzzzBov好的，我很抱歉。在

w3schools.com

@Arjun的某个地方找到了它，w3schools是一个如此糟糕的资源，以至于w3傻瓜被创建出来。使用MDN。@zzzzBov谢谢！！！我以后一定会使用MDN！！！建议在点击“post”按钮之前检查您帖子的格式。尝试此操作无效=（我甚至对其进行了多次调整，但在提交时，它仍然会转到页面，而不是告诉我有什么问题。最好的JavaScript不是JavaScript^^^我建议添加

模式=“.@yahoo\.com”

到email字段，因为这显然是一个要求。但是如果您将字段留空，它不会发出任何警报。为此，需要一点JavaScript。更新输入以使您具有

必需的属性。看到这将是很好的，但不幸的是，我必须使用JS。欢迎访问该网站。谢谢因为我用codeHey发布了一个很好的答案，我试过了，但它仍然直接重定向到页面，没有显示任何消息，但我需要它在无效时突出显示红色。我甚至尝试将你的和Mattia组合在一起：（您可以使用javascript使用document.myForm.phonenumber.className=“MyClass”
更改html元素的css类，这样您就可以在css中设置MyClass，在输入无效时根据需要设置输入样式。
<form name="myForm" onsubmit="return validateForm()" method="post">

<head>

<link rel="stylesheet" HREF="C:\Users\Neshia\Desktop\CGS3066\Form Validation Style Sheet.css" TYPE="text/css">

<script>

 function validateForm() {
  var email = document.myForm.email.value;
  var phone = document.myForm.phonenumber.value;
  var age = document.myForm.age.value;
  console.log(age)

  var okToSubmit = true;
  age = age.replace(/[^0-9]/g, '');
  if (age.length != 10) { 
    alert("not 10 digits");
    okToSubmit = false;
  } else {
    alert("yep, its 10 digits");
  }

  if (age > 120 || age < 0) {
    alert("Must be a positive number less than 120");
    okToSubmit = false;
  }

  return okToSubmit;
}