【Javascript】入门之QQ验证(嵌套三目运算符)

最新推荐文章于 2022-07-11 11:14:13 发布

夹心776655

最新推荐文章于 2022-07-11 11:14:13 发布

阅读量364

点赞数 2

分类专栏：代码实例 js交互设计文章标签： javascript

本文链接：https://blog.csdn.net/qq_37086980/article/details/110116942

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

题目描述:

请输入QQ号, 判断
1、有没有输入
2、输入的是不是数字
3、不能有0在前面
4、不能是小数
5、输入的数字必须在5位以上、11位以下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ验证</title>
</head>

<body>
    请输入QQ号码:
    <input type="text" id="inp">
    <button id="btn">点击验证</button>
    <script>
        /* 
            点击按钮, 获取输入框的值，验证值是否符合规范
            1. 获取元素 btn inp
        */
        var btn = document.getElementById('btn');
        var inp = document.getElementById('inp');
        console.log(btn, inp);
        // 2. 添加事件  
        btn.onclick = function(){
            // 3. 获取输入框的值，验证值是否符合规范
            // 3.1 获取输入框的值  inp.value
            console.log(inp.value);
            var t = inp.value;
            // 3.2 验证规范
            // 3.2.1 有没有输入  空  字符长度是0
            // t.length == 0 ? alert('请输入QQ号') : alert('正确');

            // 3.2.2 输入的是不是数字  isNaN  true -- 不是   false---是
            // isNaN(t) == true ? alert('请输入数字') : alert('正确');

            // 3.2.3 不能有0在前面   首位不能是0  只判断首位
            // 通过下标首位字符
            console.log(t.charAt(0)); // console  alert不能做任何判断
            // t.charAt(0) == '0' ? alert('首位不能是0') : alert('正确');

            // 3.2.4 不能是小数  parseInt  如果转的是小数 23.2222  23     233333   233333
            // parseInt(t) != t ? alert('请输入整数') : alert('正确');

            // 3.2.5   输入的数字必须在5位以上、11位以下  字符串的长度
            // t.length > 5 && t.length < 11 ? alert('正确') : alert('请输入5-11位之间的数字');

            // 4. 条件组合
            t.length == 0 ? alert('请输入QQ号') : 
            isNaN(t) == true ? alert('请输入数字') : 
            t.charAt(0) == '0' ? alert('首位不能是0') :
            parseInt(t) != t ? alert('请输入整数') :
            t.length > 5 && t.length < 11 ? alert('正确') : alert('请输入5-11位之间的数字');

        }
    </script>
</body>

</html>