老师您看看,为什么我JS部分实现不了

老师您看看,为什么我JS部分实现不了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type = text/css>

        *{

            margin:0;

            padding:0;

        }

        

        .header{

            /*预设*/

            background:#3092d1;

            width:100%;

            height:50px;

            /*字体*/

            font-size:20px;

            color:#fff;

            text-decoration:none;

            

        }


        .header div{

            /*位置*/

            padding-left:5%;

            padding-top:0.8%;

        }

        

        .body{

            /*预设*/

            background:#eeeeee;

            width:100%;

            height:1080px;

            /*字体*/

            font-size:20px;

            text-decoration:none;

        }


        .body form{

            /*位置*/

            position:absolute;

            /*预设*/

            width:100%;

            height:800px;

        }


        .body form input,select{

            /*预设*/

            height:30px;

            width:100%;

            /*位置*/

            margin: 0.5%;

            position: relative;

            left:50%;

        }


        .body form div{

            /*预设*/

            height:60px;

            width:300px;

            /*位置*/

            margin: 1%;

            position: relative;

            left:35%;

            top: 10%;

        }


        .body form div p{

            display: none;

            color: red;

            height: 60px;

            width:20px;

            position: relative;

            top: -55%;

            right:-160%;

            

        }

        .body form div div{

            /*预设*/

            height:30px;

            width:150px;

            /*位置*/

            position: relative;

            top:60%;

            left: 1%;

            text-align: right;

        }

    </style>

</head>

<body>

    <!-- 总体概况 -->

    <div class = "total">

        <!-- 页眉 -->

        <div class = "header">

            <div>用户注册</div>

        </div>

        <!-- 网页主体部分 -->

        <div class = "body">

            <!-- 表格 -->

            <form>

                <div><div>用户名:</div><input type = "text" id = "userNickNameInput"><p id = "userNickName" onblur = judgeNName() >ok</p></div>

                <div><div>登陆密码:</div><input type = "password" id = "pwdInput"><p id = "pwd" onblur = judgePwd()>ok</p></div>

                <div><div>确认密码:</div><input type = "password" id = "rePwdInput"><p id = "rePwd" onblur = judgeRepwd()>ok</p></div>

                <div><div>姓名:</div><input type = "text" id = "userNameInput"><p id = "userName" onblur = judgeName()>ok</p></div>

                <div>

                    <div>性别:</div>

                    <select name="userSex">

                            <option>男</option>

                            <option>女</option>

                    </select>

                </div>

                <div><div>身份证号码:</div><input type = "text" id = "userIdInput"><p id="userID" onblur = judgeID()>ok</p></div>

                <div><div>邮箱:</div><input type = "text" id = "userMailInput"><p id="userMail" onblur = judgeMail()>ok</p></div>

                <div><div>手机号码:</div><input type = "text" id = "userPhoneInput"><p id="userPhone" onblur = judgePhone()>ok</p></div>

                <input type="submit" onclick = submitBtn()> 

            </form>

        </div>

    </div>

    <script>

        // 获取对象

        var userNickName = document.getElementById('userNickName'),

            userNickNameInput = document.getElementById('userNickNameInput'),

            pwd = document.getElementById('pwd'),

            pwdInput = document.getElementById('pwdInput'),

            rePwd = document.getElementById('rePwd'),

            rePwdInput = document.getElementById('rePwdInput'),

            userName = document.getElementById('userName'),

            userNameInput = document.getElementById('userNameInput'),

            userID = document.getElementById('userID'),

            userIdInput = document.getElementById('userIdInput'),

            userMail = document.getElementById('userMail'),

            userMailInput = document.getElementById('userMailInput'),

            userPhone = document.getElementById('userPhone'),

            userPhoneInput = document.getElementById('userPhoneInput');


        // 判断用户名

        var judgeNName = function judgeNName(userNickNameInput){

                if(userNickNameInput.value = /^[a-z]\+[\w{5,17}]$/i){

                    userNickName.style.display = block;

                }else{

                    userNickName.style.display = block;

                    userNickName.value = userNickName.value.inneerHTML('用户名是6-20位字母、数字或“_”,字母开头');

        }

        }


        // 判断密码

        var judgePwd = function judgePwd(pwdInput){

                if(pwdInput.value = /^[\S\w!@/]{6,18}$/){

                    Pwd.style.display = block;

                }else{

                    Pwd.style.display = block;

                    Pwd.value = Pwd.value.inneerHTML('6-18位,包括数字字母或符号,中间不能有空格。');

        }

        }


        // 确认密码

        var judgeRepwd = function judgeRepwd(rePwdInput){

                if(rePwdInput.value == pwdInput.value){

                    rePwd.style.display = block;

                }else{

                    rePwd.style.display = block;

                    rePwd.value = rePwd.value.inneerHTML('两次输入密码不一致');

        }

        }


        // 姓名

        var judgeName = function judgeName(userNameInput){

                if(userNameInput = /^[u4e00-u9fa5]{2,4}$/){

                    userName.style.display = block;

                }else{

                    userName.style.display = block;

                    userName.value = userName.value.inneerHTML('真实姓名必须是两位到四位的中文汉字');

        }

        }


        // 身份证号码

        var judgeID = function judgeID(userIdInput){

                if(userIdInput = /^[\d+]{15}|[\d+]{17}+X|[\d+]{18}$/){

                    userID.style.display = block;

                }else{

                    userID.style.display = block;

                    userID.value = userID.value.inneerHTML('要求15位或者18位的数字,18位时最后一位可能是x');

        }

        }


        // 邮箱

        var judgeMail = function judgeMail(userIdInput){

                if(userMailInput = /^[\w+]+@[\w+\.]+[\w+\.]+[\w*\.]$/){

                    userMail.style.display = block;

                }else{

                    userMail.style.display = block;

                    userMail.value = userMail.value.inneerHTML('邮箱格式不正确');

        }

        }


        // 手机号码

        var judgePhone = function judgePhone(userPhoneInput){

                if(userPhoneInput = /^$/){

                    userPhone.style.display = block;

                }else{

                    userPhone.style.display = block;

                    userPhone.value = userPhone.value.inneerHTML('手机格式不正确');

        }

        }


        //提交

        var submitBtn = function submitBtn(){

            

        }

    </script>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,正则参考如下:

         // 密码
        /^\S{6,18}$/ 
        // 姓名
        /^[\u4e00-\u9fa5]{2,4}$/
        // 身份证号
        /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|x)$)/
        // 邮箱
        /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        // 手机号
        /^1(3|4|5|6|7|8|9)\d{9}$/

老师已经把用户名部分给同学调好了呢,其余的部分跟用户名的实现是类似的,同学可以认真研究下是怎么实现的,也可以参考问答区一些优质的问答。我们建议大家独立完成作业,遇到困难在问答区提问,老师会尽可能引导启发大家一步步实现。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

好帮手慕粉 2020-01-21 10:31:11

同学你好,是同学验证的部分写的不对,以用户名为例:

http://img1.sycdn.imooc.com//climg/5e266103092af36911180190.jpg

在验证正则时,可以使用test方法,pattern.test(str),如果符合就会返回true,不满足返回false:

http://img1.sycdn.imooc.com//climg/5e26619b0949dd0612170513.jpg

效果:

http://img1.sycdn.imooc.com//climg/5e2661ad09482ca607060124.jpg

另外样式部分,设置类型也要加双引号:

http://img1.sycdn.imooc.com//climg/5e2661ea09cd5c4405900168.jpg

其余部分的实现跟用户名时类似的,同学可以参考着用户名实现一下,再把相关样式调整一下。另外问答区有很多优秀的同学写的代码,同学也可以参考一下。建议同学再回顾下正则部分的视频。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 TechnicalTopSales #1
    老师,那其他正则表达式可以帮我看一下吗。我改了一下好像还是实现不了,不知道是不是onblur那个也有问题
    2020-01-21 17:45:14
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师