<!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. 九、响应式发：rem和less（适配移动端）

    一.响应式开发 响应式开发优先适配移动端又兼容到pc端 官网:https://less.bootcss.com/usage/ 教程:https://www.w3cschool.cn/less/ rem ...

  2. 吴裕雄--天生自然java开发常用类库学习笔记：SortedSet接口

    import java.util.SortedSet ; import java.util.TreeSet ; public class TreeSetDemo05{ public static vo ...

  3. DevOps - 优势

    章节 DevOps – 为什么 DevOps – 与传统方式区别 DevOps – 优势 DevOps – 不适用 DevOps – 生命周期 DevOps – 与敏捷方法区别 DevOps – 实施 ...

  4. 【剑指Offer】面试题28. 对称的二叉树

    题目 请实现一个函数,用来判断一棵二叉树是不是对称的.如果一棵二叉树和它的镜像一样,那么它是对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的.     1    / \   2   2 ...

  5. Idea 打开多profile注意事项

    Maven项目经常会有多个profile,可以方便在编译时指定profile. 如果有多个profile,idea 在打开工程后默认配置可能会有些问题. 例如: 最近在编译一个项目:https://g ...

  6. centos下安装tomcat8.

    一.tomcat安装之前,首先安装java jdk,所以手首先将相关安装包都下载传到虚拟机上 1.下载java的linux----jdk1.8安装 到官网上下载与本虚拟机版本位相适应的位节数的Linu ...

  7. node - TypeError: argument handler must be a function 路由报错的原因

    原因 : 路由一定要暴露给外部使用   var express = require('express') var router = express.Router()   router.get('/', ...

  8. cf221 D. Little Elephant and Array

    题解真的是太神奇了2333 用离线和树状数组(为什么感觉和HH的项链是的,什么鬼),比较巧妙的是他把整个数列分成几段.用一个vector来记录每个数出现的位置.一共就是data[a[i]][sz]-- ...

  9. python面试题整理（一）

    python基础:1.列表生成式和生成器表达式有什么区别 我说的是首先写法不一样,列表生成式用[],生成器表达式用(),其次列表生成是一次性生成一个完整的列表,生成器表达式返回的是一个一个的值,占用内 ...

  10. .NET 一次读取几百条数据优化，从原来30分钟优化到30秒

    1.全部数据读取到内存, 不要使用string,而是使用stringbuilder,stringbuilder的效率非常高 2.添加到数据库 不要使用excute,而是使用事务,几百万条数据会请求数据 ...