老师您看看,为什么我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>
正在回答
同学你好,正则参考如下:
// 密码 /^\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}$/
老师已经把用户名部分给同学调好了呢,其余的部分跟用户名的实现是类似的,同学可以认真研究下是怎么实现的,也可以参考问答区一些优质的问答。我们建议大家独立完成作业,遇到困难在问答区提问,老师会尽可能引导启发大家一步步实现。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星