<!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. 我编写的EEPROM 上位机软件

    进入模式: 上位机发送 消息 上位机EEPROM 按下进入模式 消息的ID号是:0x08111111 数据是: 00 01 ff 00 00 00 00 00 上位机显示 运行状态 :为进入模式 当我 ...

  2. 禁用u盘再启用

    将u盘量产为CDROM后,刷入ISO后需要重新插拔u盘才能访问新内容.此文展示的代码可以实现模拟这种行为,免插拔使windows重新读取cdrom. 网上参考资料有限,自行试验了很多种方法,终于成功了 ...

  3. flask部署:Ubuntu下使用nginx+uwsgi+supervisor部署flask应用

    之前一直用的Centos或者Red hat,自从使用Ubuntu后,发现Ubuntu使用起来更方便,自此爱上Ubuntu. 一.从github上下载flask应用 1.我已经成功将自己编写好的应用上传 ...

  4. postman带上token对接口进行测试

    根据验证码进行登陆,登录之后返回token.然后请求其他接口时在header头中带上token访问其他接口进行测试 账户信息输入验证码 登陆成功,看到返回的token 我们这个项目可以刷新一下toke ...

  5. HTML的文档结构与语法（一）

    一.走进Web开发 Web运行的原理: 二.HTML 1.1什么是html HTML是用来描述网页的一种语言 HTML指的是超文本标记语言(Hyper Text Markup Language) 超文 ...

  6. eclipse启动tomcat访问localhost:8080报404

    直接双击tomcat\bin目录下面的startup.bat启动 是没问题 的 但是eclipse启动tomcat访问localhost:8080报404 解决方案如下: 双击红色圈里面的tomcat ...

  7. Java基础（接口，list和ArrayLIst）

    1,使用接口的目的:不是10类都有getName()方法,则10个类都继承一个接口来实现.接口本身是一种规范,在具体业务有需求的时候才用接口. 具体例子: I充电设备 x = new 手机(" ...

  8. Power BI Desktop 安装环境

    Power BI Desktop 环境 最低要求 Windows 7/Windows Server 2008 R2 或更高版本 .NET 4.5 Internet Explorer 9 或更高版本 内 ...

  9. 文件的概念、标准IO其一

    1.文件的概念 文件是一种存储在磁盘(掉电不丢失存储设备)上,掉电不丢失的一种存储数据的方式,文件在系统中有以下层次的结构来实现. 系统调用.文件IO.标准IO的关系如下: 2.linux系统的文件分 ...

  10. 【Android】家庭记账本手机版开发报告二

    一.说在前面 昨天 完成了对记账本的账单的增删 今天 完善昨天的框架结构( 1.引入ViewModel管理数据.使MainActive 只管理界面.不再管数据了 2.引入AsyncTask.后台执行. ...