<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<h1>JavaScript 验证输入</h1>

<p>请输入 1 到 10 之间的数字：</p>

<input id="numb">

<button type="button" onclick="myFunction()">提交</button>

<p id="demo"></p>

<script>

function myFunction() {

    var x, text;

    // 获取 id="numb" 的值

    x = document.getElementById("numb").value;

    // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10

    if (isNaN(x) || x < 1 || x > 10) {

        text = "输入错误";

    } else {

        text = "输入正确";

    }

    document.getElementById("demo").innerHTML = text;

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<form action="demo_form.php" method="post">

  <input type="text" name="fname" required="required">

  <input type="submit" value="提交">

</form>

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

</body>

</html>

吴裕雄--天生自然 JAVASCRIPT开发学习： 表单的更多相关文章

  1. 吴裕雄--天生自然 JAVASCRIPT开发学习：对象 实例（2）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄--天生自然 JAVASCRIPT开发学习： 正则表达式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄--天生自然 JAVASCRIPT开发学习： 表单验证

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄--天生自然 JAVASCRIPT开发学习：条件语句

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄--天生自然 JAVASCRIPT开发学习：对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄--天生自然 JAVASCRIPT开发学习

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄--天生自然 JAVASCRIPT开发学习：函数定义

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄--天生自然 JAVASCRIPT开发学习： this 关键字

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄--天生自然 JAVASCRIPT开发学习：Date（日期） 对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 盘姬工具箱WV1.10

    ========================================================================== {盘姬工具箱CruiserEXPforWin版是一 ...

  2. 七、Vue组件库：Element、Swiper（轮播专用组件）

    一.vue的Element组件库 官网:https://element.eleme.cn/#/zh-CN 1.1安装 推荐安装方法: 首先要进入项目目录 cnpm i element-ui -S 或 ...

  3. JuJu团队12月3号工作汇报

    JuJu团队12月3号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 于达 修改batch里给sentence加padding的方法 继续调试 无 婷婷 给crossentro ...

  4. UVALive - 7752 Free Figurines

    题意:有n个娃娃,如果大娃娃j直接套小娃娃i,则fa[i] = j.若fa[i] = 0,则该娃娃自由.给出每个娃娃初始的父亲,和改变后的父亲,在满足以下合法操作的条件下,问最少需要多少次变换. 1. ...

  5. 7 —— node —— 响应图片

      const http = require('http'); const fs = require('fs'); const server = http.createServer(); server ...

  6. 吴裕雄--天生自然C++语言学习笔记：C++ 运算符

    运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C++ 内置了丰富的运算符,并提供了以下类型的运算符: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 算术运算符 下表显示 ...

  7. 装饰者模式（Decorator Pattern）C#版本的

    仍然来自 zhili https://www.cnblogs.com/zhili/p/DecoratorPattern.html 谢谢啊 呵呵 ---------------------------- ...

  8. Nginx php-fpm 分离搭建 (上) 未完

    最近又重新看了一遍   'nginx入门到精通'      抽点时间 出来搭几个Demo  会有更深体会: Nginx如何与Php-fpm结合 Nginx不只有处理http请求的功能,还能做反向代理. ...

  9. Day 15：缓冲输入输出常用方法和小练习

    以拷贝图片为例子,演示异常处理的代码: 拷贝一张图片 import java.io.File;import java.io.FileInputStream;import java.io.FileOut ...

  10. [NCTF2019]Fake XML cookbook

    0x00 知识点 XXE攻击 附上链接: https://xz.aliyun.com/t/6887 XXE(XML External Entity Injection)全称为XML外部实体注入 XML ...