首页 > 编程语言 > 详细

JavaScript002,验证输入

时间:2019-12-21 23:44:04      阅读:88      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>检查输入的内容是否为数字</p>
        <!-- 建立文本框输入内容,placeholder=‘‘可以在里面输入提示信息 -->
        <input type="text" name="" id="demo1" value="" placeholder="请输入内容" />
        <!-- 点击按钮,执行myFunction()方法 -->
        <button type="button" onclick="myFunction()">检查</button>
        <!-- 输出结果 -->
        <p id="demo2" style="color: red;"></p>
        
        <script type="text/javascript">
            function myFunction(){
                var x = document.getElementById(demo1).value;//获取input框内的值,也就是value
                var y = document.getElementById(demo2);//获取p标签,方便输出结果
                if(x==""||x==" "||isNaN(x)){//isNaN(x):检查X是否不为数字,不是就输出if,否则输入else
                    y.innerHTML=输入内容不是数字,重新输入!;
                }
                else{
                    y.innerHTML=输入正确!;
                }
            }
            /* if(x==""||x==" "||isNaN(x))只能判断空值,一个空格,和非数字,
            如果是多个空格或者特殊符号依然会判断错误,所以实际应用当中需要用到正则表达式; */
        </script>
        
        <p>------------分割线------------</p>
        <p>用正则表达式判断输入的内容是否为数字</p>
        <!-- 建立文本框输入内容,placeholder=‘‘可以在里面输入提示信息 -->
        <input type="text" name="" id="demo3" value="" placeholder="请输入内容" />
        <!-- 点击按钮,执行myFunction1()方法 -->
        <button type="button" onclick="myFunction1()">检查</button>
        <!-- 输出结果 -->
        <p id="demo4" style="color: red;"></p>
        
        <script type="text/javascript">
            function myFunction1(){
                var a = document.getElementById(demo3).value;
                var b = document.getElementById(demo4);
                if(a.replace(/(^\s*)/,"")==""||isNaN(a)){
                    b.innerHTML=输入内容不是数字,重新输入!;
                }
                else{
                    b.innerHTML=输入正确!;
                }
            }
            /* a.replace(/(^\s*)/,"")==""
            这里表示以空格开头且有1个或多个空格,就会把值转换为==""空值,从而判断不是数字
            ^    表示以某个字符开头
            \s    表示空白字符 包括:空格、Tab、换行、回车
            *    表示有一个或者多个同类型字符
            
            其他复杂的正则还没研究过,这里只是简单例子
            */
        </script>
    </body>
</html>

JavaScript002,验证输入

原文:https://www.cnblogs.com/zhou0910/p/12078594.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!