<!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. 初学Java(1)

    1.Java基本数据类型: 2.Java的main方法: 被static修饰,类名与文件名相同:void:方法的返回值,无返回值:main方法是程序的入口,有且只有一个: String[] args: ...

  2. python中的魔术属性与魔法方法

    1.魔法属性 · 1.1__doc__魔法属性  表示类的描述信息 class Fo: """ 这是今天第一个魔术属性__doc__""" ...

  3. Robot set variable if

    ${strid} Set Variable If '${row}' =='2' LFFD_TANK_RAMP ... '${row}' =='3' LFFD_TANK_LANDING

  4. POJ1723 SOLDIERS 兄弟连

    SOLDIERS 有一个性质:在一个长为n的序列a中找一个数 \(a_k\) 使得 \(\sum\limits_{i=1}^n abs(a_i-a_k)\) 最小,则 \(a_k\) 是a的中位数. ...

  5. 这26个为什么，让初学者理解Python更简单！

    为什么Python使用缩进来分组语句? 为什么简单的算术运算得到奇怪的结果? 为什么浮点计算不准确? 为什么Python字符串是不可变的? 为什么必须在方法定义和调用中显式使用“self”? 为什么不 ...

  6. 078-PHP数组排序，两次循环法

    <?php $arr=array(35,43,56,2,76,23,47,55,71); //定义一个数组 echo '数组排序之前的信息:<br />'; print_r($arr ...

  7. Power BI 安装注册教程

    把下载好的MSI包PBIDesktop_x64.msi 双击安装 点击下一步 选择文件路径 点击安装 点击完成 初始化中 安装完成界面 账号注册 https://powerbi.microsoft.c ...

  8. 实验吧-隐写-FIVE1、so beautiful so white(文件头修改)

    FIVE1 下载图片,kali下foremost恢复文件,将得到的图片用Winhex打开进行观察,发现最后面有一段貌似是代码的东西. LS0uLi4gIC4tICAuLi4uLiAgLS0uLi4gI ...

  9. Inception Score

    转载 https://www.jiqizhixin.com/articles/2019-01-10-18    全面解析Inception Score原理及其局限性 https://blog.csdn ...

  10. POJ 1423：Big Number 求N的阶乘的长度 斯特林公式

    Big Number Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 27027   Accepted: 8626 Descr ...