JavaScript---案例一：判断输入信息

最新推荐文章于 2022-03-22 22:53:30 发布

无名一小卒

最新推荐文章于 2022-03-22 22:53:30 发布

阅读量656

点赞数

分类专栏：前端学习开发记录文章标签： JavaScript

本文链接：https://blog.csdn.net/h1025372645/article/details/89341489

版权

前端学习开发记录同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

java基础练习

4 篇文章 0 订阅

订阅专栏

需求

现有一个输入信息的窗口，要求如下

1：判断输入的信息的格式，手机号格式与邮箱格式输入是否正确；

2：判断输入的信息内容是否为空

html页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>javaScript案例</title>
    <script src="my_work.js"></script>

</head>
<body>


<!--申请填写信息-->
<div id="editBlockBg" >
    <div>
        <div id="errorTip" >什么错误</div>
        <div>
            <div>
                 <span>填写资料</span>                   
            </div>
            <div>
                <input id="userName" maxlength="15" value="请输入姓名">
            </div>
            <div>
                <input id="mobile"maxlength="11" value="请输入电话">
            </div>
            <div class="edit-input-content">
                <input id="imgCode"maxlength="4" value="请输入图像验证码">
                <label class="code-img">              
                    <img id="yzmImg" >
                </label>
            </div>
            <div>
                <input id="smsCode"maxlength="6" value="请输入手机验证码">
                <label id="getCode">获取验证码</label>
            </div>
            <div>
                <input id="email" value="请输入邮箱(选填)">
            </div>
            <div>
                <input id="tip" value="备注(选填)">
            </div>
            <div id="submitBtn">立即申请</div>
           
        </div>
    </div>
</div>

</body>
<script>
    //主函数
    my_work();
</script>
</html>

核心JS代码如下：my_work.js

function my_work() {
    var uName                = document.getElementById("userName");
    var uPhone               = document.getElementById("mobile");
    var iCode                = document.getElementById("imgCode");
    var sCode                = document.getElementById("smsCode");
    var subBtn               = document.getElementById("submitBtn");
    var errorTip             = document.getElementById("errorTip");
    var email                = document.getElementById("email");
    var editBlockBg          = document.getElementById("editBlockBg");
    var getCode              = document.getElementById("getCode");

//电话号码
    var PATTERN_CHINAMOBILE  = /^1(3[4-9]|5[012789]|8[23478]|4[7]|7[8])\d{8}$/; //移动号
    var PATTERN_CHINAUNICOM  = /^1(3[0-2]|5[56]|8[56]|4[5]|7[6])\d{8}$/; //联通号
    var PATTERN_CHINATELECOM = /^1(3[3])|(8[019])\d{8}$/; //电信号

//邮箱格式验证
    var regEmail             = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;



    //检查电话号码
    function checkNum() {
        if(PATTERN_CHINAMOBILE.test(uPhone.value)||
            PATTERN_CHINAUNICOM.test(uPhone.value)||
            PATTERN_CHINATELECOM.test(uPhone.value)){
            return true;
        }
        else {
            return false;
        }
    }
    //检查邮箱格式
    function checkEmail(){
        if(email.value!="请输入邮箱(选填)"){
            if(regEmail.test(email.value)){
                return true;
            }
            else{
                return false;
            }
        }
    }

    //错误提示
    function erroeMEssage(str) {
        errorTip.innerText     = str;
        errorTip.style.display = "block";
        setTimeout(function () {
            errorTip.style.display = "none";
        },500)
    }

    //警告电话号码错误
    function outErrorPhone() {
        checkNum();
        if(checkNum() === false){
            var str = "请输入正确电话号码";
            erroeMEssage(str);
            return false;
        }
    }
    
    //判断输入
    function checkValue(){
        var unval = uName.value;
        var upval = uPhone.value;
        var icval = iCode.value;
        var scval =sCode.value
        checkNum();
        if(unval === "请输入姓名" || unval ===""){
            if(unval ===""){
                unval = "请输入姓名";
            }
            erroeMEssage(unval);
            return false;
        }
        else if(upval === "请输入电话" || upval === ""){
            if(upval === ""){
                upval = "请输入电话";
            }
            erroeMEssage(upval);
            return false;
        }
        else if(checkNum() === false){
            outErrorPhone();
        }
        else if(icval === "请输入图像验证码"||icval === ""){
            if(icval === ""){
                icval = "请输入图像验证码";
            }
            erroeMEssage(icval);
            return false;
        }
        else if(scval === "请输入手机验证码"||scval === ""){
            if(scval === ""){
                scval="请输入手机验证码";
            }
            erroeMEssage(scval);
            return false;
        }
        else{
            editBlockBg.style.display = "none";
            alert("提交成功！");
        }
    }

    //获取手机验证码判断手机号
    getCode.addEventListener("click",function (ev) {
        outErrorPhone();
    });

    //提交
    subBtn.addEventListener("click",function (ev) {
        checkEmail();
        if(checkEmail() === false){
            var str = "请输入正确邮箱格式";
            erroeMEssage(str);
            return false;
        }
        checkValue();
    });
    
}

无名一小卒

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript---案例一：判断输入信息

需求现有一个输入信息的窗口，要求如下1：判断输入的信息的格式，手机号格式与邮箱格式输入是否正确；2：判断输入的信息内容是否为空html页面代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javaS...
复制链接

扫一扫