zoukankan      html  css  js  c++  java
  • 吴裕雄--天生自然 JAVASCRIPT开发学习: 表单

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

  • 相关阅读:
    在前端眼中pc端和移动的开发区别
    两个对象的合并
    关于后台传来的json是含英文字母的string
    关于jquery的取消阻止默认事件
    练习:模态对话框
    JS之DOM节点增删改查与属性设置
    JS之DOM Event(事件)
    JS的DOM对象之DOM节点
    JS的history对象和location对象
    JS的BOM对象之window对象,利用window对象方法实现定时器
  • 原文地址:https://www.cnblogs.com/tszr/p/10942832.html
Copyright © 2011-2022 走看看