Day2-JS-表单

一、JavaScript 表单验证

①效果:如果是输入的东西的话就可以把数据提交到php中,但是如果是在空白的情况下,按下了回车或者是按下了按钮的话

Day2-JS-表单_第1张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        function validateForm(){
            var x=document.forms["myForm"]["fname"].value;
            if(x==null||x==""){
                alert("需要输入名字");
                return false;
            }
        }
    script>
head>
<body>
    <form action="" name="myForm" 
    onsubmit="return validateForm()" method="post">
名字:<input type="text" name="fname">
<input type="submit" value="提交">
    form>
body>
html>
完整代码

 

二、JavaScript 验证输入的数字

①效果: 

 Day2-JS-表单_第2张图片            Day2-JS-表单_第3张图片

 

就是通过x获取,input中输入的数字,然后用if else 来判断,给txt赋值不同的情况的值,如果用innerHTML来给demo的p赋值即可了

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <h1>JavaScript 验证输入h1>

    <p>请输入 1 到 10 之间的数字:p>
    <input type="text" id="numb">
    <button type="button" onclick="myFunction()">提交button>
    <p id="demo">p>

    <script>
        function myFunction(){
            var x,text;
            x=document.getElementById("numb").value;

            if(isNaN(x)||x<1||x>10)
            {
                text="输入错误";

            }
            else{
                text="输入正确";
            }
            document.getElementById("demo").innerHTML=text;
        }
    script>
body>
html>
View Code

三、HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交

①效果:Day2-JS-表单_第4张图片

<body>

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
form>

<p>点击提交按钮,如果输入框是空的,浏览器会提示错误信息。p>

body>

Day2-JS-表单_第5张图片

 

 

    

四、JavaScript 表单验证

  • 验证表单数据是否为空?
  • 验证输入是否是一个正确的email地址?
  • 验证日期是否输入正确?
  • 验证表单输入内容是否为数字型?

   1、必填(或必选)项目

下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
}
script>
head>
<body>
    
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
form>
    
body>
html>
View Code

  

  2、E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<head>
<script>
function validateForm(){
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
        alert("不是一个有效的 e-mail 地址");
          return false;
    }
}
script>
head>
<body>
    
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
form>
    
body>
html>
View Code

 

你可能感兴趣的:(Day2-JS-表单)