<!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. Django（十一）视图详解：基本使用、登录实例、HttpReqeust对象、HttpResponse对象

    一.视图(基于类的视图) [参考]https://docs.djangoproject.com/zh-hans/3.0/topics/class-based-views/intro/ 1)视图的功能 ...

  2. 配置thinkphp对mysql线上线下切换不同环境的配置 - (mysql-thinkphp) (1)

    1.先打印出配置项的信息,在Index控制器下面的index->index里面设置 namespace app\index\controller; class Index { public fu ...

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

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

  4. LeetCode160 相交链表（双指针）

    题目: click here!!题目传送门 思路: 1.笨方法 因为如果两个链表相交的话,从相交的地方往后是同一条链表,所以: 分别遍历两个链表,得出两个链表的长度,两个长度做差得到n,然后将长的链表 ...

  5. 实验吧-杂项-flag.xls(notepad++查找)、保险箱(linux文件分解、密码破解)

    flag.xls 下载文件,用notepad++打开,查找flag就能找到flag. 保险箱(linux文件分解.密码破解) 将图片保存下来,用kali的binwalk分析,发现有rar文件,然后用f ...

  6. 2016蓝桥杯决赛C/C++A组第四题 路径之谜

    题意: 小明冒充X星球的骑士,进入了一个奇怪的城堡.城堡里边什么都没有,只有方形石头铺成的地面. 假设城堡地面是 n x n 个方格.[如图1.png]所示. 按习俗,骑士要从西北角走到东南角.可以横 ...

  7. HDU 5475：An easy problem 这题也能用线段树做？？？

    An easy problem Time Limit: 8000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  8. C# web.config常用配置说明（文件上传大小、调试、session）

    直接贴代码可好(后续用到的在更新) 黄色字体的为说明 <?xml version="1.0" encoding="utf-8"?><!-- 有 ...

  9. java课程之团队开发冲刺阶段2.5

    总结昨天进度: 1.昨天对课前提醒的基本框架已经搭好,剩下的就是对如何提醒进行设置 遇到的困难: 1.在一些细节地方,代码有点犯浑,将Preferences的文件写错了,导致在用switch开关得到时 ...

  10. 算法（第4版）Robert Sedgewick 刷题 第一章（1）

    /** * @Description 颠倒数组排列顺序 * @author SEELE * @date 2017年8月17日 上午10:56:17 * @action sortArr */ publi ...