麻烦老师看下是否正确，谢谢老师

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
 
    .header {
        background: #778899;
    }
 
    .header__wrap {
        width: 1200px;
        height: 60px;
        margin: 0 auto;
    }
 
    .header__title {
        height: 60px;
        color: #fffaf0;
        font-size: 30px;
        line-height: 60px;
    }
 
    .sign_up {
        background: #fffff0;
    }
 
    .sign_up__wrap {
        width: 1200px;
        height: 1000px;
        margin: 0 auto;
        padding-top: 80px;
    }
 
    .sign_up__form {
        width: 254px;
        margin: 0 auto;
    }
 
    .sign_up__input {
        width: 250px;
        height: 35px;
        display: block;
        margin-bottom: 15px;
    }
 
    label {
        margin-bottom: 0.5rem;
        display: inline-block;
        font-size: 10px;
        color: lightslategrey;
    }
 
    .sign_up__div {
        font-size: 10px;
        font-weight: bold;
        margin-bottom: 10px;
    }
 
    .sign_up__btn {
        display: block;
        width: 250px;
        height: 35px;
        font-size: 20px;
        text-align: center;
        line-height: 35px;
        margin: 0 auto;
        border: 1px solid #778899;
        border-radius: 4px;
    }
 
    .sign_up__btn:hover {
        cursor: pointer;
    }
</style>
<body>
<header class="header">
    <div class="header__wrap">
        <div class="header__title">用户注册</div>
    </div>
</header>
<div class="sign_up">
    <div class="sign_up__wrap">
        <form action="" method="post" class="sign_up__form">
            <div class="sign_up__username_div sign_up__div">
                <label for="username">用户名</label>
                <input type="text" class="sign_up__input sign_up__username" id="username">
            </div>
            <div class="sign_up__pwd_div sign_up__div">
                <label for="pwd">登陆密码</label>
                <input type="password" class="sign_up__input sign_up__pwd" id="pwd">
            </div>
            <div class="sign_up__confirmPwd_div sign_up__div">
                <label for="confirmPwd">确认密码</label>
                <input type="password" class="sign_up__input sign_up__confirm_pwd" id="confirmPwd">
            </div>
            <div class="sign_up__realName_div sign_up__div">
                <label for="realName">姓名</label>
                <input type="text" class="sign_up__input sign_up__real_name" id="realName">
            </div>
            <label for="sex">性别</label>
            <select name="sex" id="sex" class="sign_up__input">
                <option value="male">男</option>
                <option value="female">女</option>
            </select>
            <div class="sign_up__idNum_div sign_up__div">
                <label for="idNum">身份证号码</label>
                <input type="text" class="sign_up__input sign_up__idNum" id="idNum">
            </div>
            <div class="sign_up__email_div sign_up__div">
                <label for="email">邮箱</label>
                <input type="email" class="sign_up__input sign_up__email" id="email">
            </div>
            <div class="sign_up__phone_div sign_up__div">
                <label for="phone">手机号码</label>
                <input type="text" class="sign_up__input sign_up__phone" id="phone">
            </div>
            <input type="button" value="提交" class="sign_up__btn">
        </form>
    </div>
</div>
<script>
    // 获取元素
    function getElem(selector) {
        return document.querySelector(selector);
    }
 
    // 处理提示信息
    function addMessage(elem, selector, message, regex) {
        if (getElem("." + selector + "__message") === null) {
            formElem[elem].style.marginBottom = "5px";
            let div = document.createElement("div");
            div.className = selector + "__message" + " sign_up__message";
            getElem("." + selector).appendChild(div);
        }
        if (regex.test(formElem[elem].value)) {
            getElem("." + selector + "__message").innerHTML = "ok";
            getElem("." + selector + "__message").style.color = "green";
        } else {
            getElem("." + selector + "__message").innerHTML = message;
            getElem("." + selector + "__message").style.color = "red";
        }
    }
 
    let formElem = {
        username: getElem("#username"),
        pwd: getElem("#pwd"),
        confirmPwd: getElem("#confirmPwd"),
        realName: getElem("#realName"),
        idNum: getElem("#idNum"),
        email: getElem("#email"),
        phone: getElem("#phone"),
        btn: getElem(".sign_up__btn")
    };
 
 
    getElem(".sign_up__form").addEventListener("input", function (event) {
        switch (event.target.id) {
            case "username":
                addMessage("username", "sign_up__username_div", "用户名必须以字母开头，6-20位，可以包含数字、下划线", /^[a-zA-Z][\w]{5,19}$/);
                break;
            case "pwd":
                addMessage("pwd", "sign_up__pwd_div", "密码长度为6-16位，不能包含空白字符", /^[\w!@#$%^&*~\-+=.,]{6,16}$/);
                break;
            case "confirmPwd":
                addMessage("confirmPwd", "sign_up__confirmPwd_div", "密码不一致", new RegExp(formElem.pwd.value));
                break;
            case "realName":
                addMessage("realName", "sign_up__realName_div", "真实姓名由2-4位中文汉字组成", /^[\u4e00-\u9fa5]{2,4}$/);
                break;
            case "idNum":
                addMessage("idNum", "sign_up__idNum_div", "身份证号码有误", /^[1-9][0-9]{14}$|^[1-9][0-9]{16}([0-9]|[xX])$/);
                break;
            case "email":
                addMessage("email", "sign_up__email_div", "邮箱输入有误", /^[a-zA-Z0-9]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/);
                break;
            case "phone":
                addMessage("phone", "sign_up__phone_div", "手机号输入不正确", /^1[3456789]\d{9}$/);
        }
    });
 
    formElem.btn.onclick = function () {
        for (let i of document.getElementsByClassName("sign_up__message")) {
            if(i.innerHTML !== "ok") {
                alert("信息输入有误，请重新输入");
                return;
            }
        }
        alert("验证成功")
    }
</script>
</body>
</html>

秋荏苒 2019-08-10

源自：正则表达式 4-8 编程练习

收起

2回答

好帮手慕夭夭 2019-08-11 11:05:44

同学很聪明哦，修改后实现的正确。老师给你介绍的思路是比较常见的。当然代码很灵活，学习阶段鼓励大家有自己的思路，就按照自己的思路实现就好。

继续加油，祝学习愉快！望采纳。

收起回答

好帮手慕夭夭 2019-08-11 10:10:23

你好同学，密码与确认密码输入输入不一致，但是验证正确

代码中获取密码的value值作为确认密码的正则是不对的，例如密码输入aaaaaa ,那么确认密码的正则就是/aaaaaa/ , 确认密码只要前6位输入6个a，正则就能匹配成功，后面再输入其他就不会再进行验证了。

这里改成获取密码的value和确认密码的value值，判断两个value值相等即可验证成功。尝试自己改一改哦。如果改的时候有不会的，可以再来上传代码提问，老师会针对代码帮助你指导哦。

祝学习愉快，望采纳。

收起回答

提问者秋荏苒 #1

老师你好，这里是我疏忽了，我改成了如下这样，试了下似乎就可以了。 addMessage("confirmPwd", "sign_up__confirmPwd_div", "密码不一致", new RegExp("^" + formElem.pwd.value + "$"));

2019-08-11 10:19:00