老师，我的问题是本节的4-8编程练习。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4-8编程练习</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.wrap{
width:1000px;
margin:0 auto;
}
h1{
width:960px;
height: 80px;
background-color: #0099cc;
font-size: 18px;
color:#fff;
line-height: 80px;
padding-left: 40px;
}
.register{
width: 1000px;
background-color: #eee;
height: 500px;
position: relative;
}
.content{
width:1000px;
position: absolute;
top:50px;
}
.content .pstyle{
width: 1000px;
color:#777;
font-size: 18px;
margin:0 auto;
position: absolute;
left:350px;
}
.pstyle1{
position: absolute;
top:40px;
}
.pstyle2{
position: absolute;
top:80px;
}
.pstyle3{
position: absolute;
top:120px;
}
.pstyle4{
position: absolute;
top:160px;
}
.pstyle5{
position: absolute;
top:200px;
}
.pstyle6{
position: absolute;
top:240px;
}
.pstyle7{
position: absolute;
top:280px;
}
.pstyle8{
position: absolute;
top:320px;
}
.pstyle9{
width:80px;
height: 40px;
background-color: #0099cc;
border-radius: 3px;
color:#fff;
line-height: 40px;
text-align: center;
position: absolute;
top:360px;
left:400px;
}
</style>
</head>
<body>
</body>
<div class="wrap">
<h1>用户注册</h1>
<div class="register" id="register">
<div class="content" id="content">
<table>
<tr class="pstyle">
<td>用户名：</td>
<td><input type="text" id="username"></td>
<!-- 提示信息-->
<td>
<p id="tip"></p>
</td>
</tr>
<tr class="pstyle pstyle1">
<td>登录密码：</td>
<td><input type="text" id="password"></td>
<td>
<p id="tip"></p>
</td>
</tr>
<tr class="pstyle pstyle2">
<td>确认密码：</td>
<td><input type="text" id="conpassword"></td>
<td>
<p id="tip"></p>
</td>
</tr>
<tr class="pstyle pstyle3">
<td>姓名：</td>
<td><input type="text" id="name"></td>
<td>
<p id="tip"></p>
</td>
</tr>
<tr class="pstyle pstyle4">
<td>性别：</td>
<td>
<select name="sex" id="sex">
<option value="male">男</option>
<option value="female">女</option>
</select>
</td>
</tr>
<tr class="pstyle pstyle5">
<td>身份证号码：</td>
<td><input type="text" id="id"></td>
<td>
<p id="tip"></p>
</td>
</tr>
<tr class="pstyle pstyle6">
<td>邮箱：</td>
<td><input type="text" id="email"></td>
<td>
<p id="tip"></p>
</td>
</tr>
<tr class="pstyle pstyle7">
<td>手机号码：</td>
<td><input type="text" id="phone"></td>
<td>
<p id="tip"></p>
</td>
</tr>
</table>
<p class="pstyle9" id="submit">提交</p>
</div>
</div>
</div>
<script>
var register = document.getElementById("register"),
content = document.getElementById("content"),
username = document.getElementById("username"),
password = document.getElementById("password"),
conpassword = document.getElementById("conpassword"),
// name是window窗口的属性，不能作为变量名使用，变量名注意不要与关键字、保留字或者js中的属性一样。
name1 = document.getElementById("name"),
sex = document.getElementById('sex'),
id = document.getElementById("id"),
phone = document.getElementById("phone"),
email = document.getElementById("email"),
submit = document.getElementById("submit"),
tips = document.querySelectorAll("#tip");
var pattern = /正则/;
var test1 = "false",
test2 = "false",
test3 = "false",
test4 = "false",
test5 = "false",
test6 = "false",
test7 = "false";
// alert(tips.length);
username.onblur = function(){
pattern = /^[a-z]\w{5,19}$/;
// 判断输入框是否为空
if(!username.value){
tips[0].innerHTML = "用户名不能为空";
tips[0].style.color = "red";
}else if(!pattern.exec(username.value)){
// 判断输入的内容是否符合正则
tips[0].innerHTML = "6-20位字母，数字，_,且以字母开头";
tips[0].style.color = "red";
}else{
tips[0].innerHTML = "ok";
tips[0].style.color = "red";
test1 = true;
}
}
password.onblur = function(){
pattern = /^\S{6,18}$/;
if(!password.value){
tips[1].innerHTML = "密码不能为空";
tips[1].style.color = "red";
}else if(!pattern.exec(password.value)){
// 判断输入的内容是否符合正则
tips[1].innerHTML = "密码6-18位，包括数字字母或符号，中间不能有空格";
tips[1].style.color = "red";
}else{
tips[1].innerHTML = "ok";
tips[1].style.color = "red";
test2 = true;
}
}
conpassword.onblur = function(){
// pattern = /^\S+{6,18}$/;
if(!conpassword.value){
tips[2].innerHTML = "密码不能为空";
tips[2].style.color = "red";
}else if(this.value != password.value){
// 判断输入的内容是否符合正则
tips[2].innerHTML = "两次密码输入不一致";
tips[2].style.color = "red";
}else{
tips[2].innerHTML = "ok";
tips[2].style.color = "red";
test3 = true;
}
}
name1.onblur = function(){
// pattern = /^[\u4e00-\u9fa5]$/;
if(!name1.value){
tips[3].innerHTML = "姓名不能为空";
tips[3].style.color = "red";
}else if(!pattern.exec(name1.value)){
// 判断输入的内容是否符合正则
tips[3].innerHTML = "请输入2-4位的中文";
tips[3].style.color = "red";
}else{
tips[3].innerHTML = "ok";
tips[3].style.color = "red";
test4 = true;
}
}
id.onblur = function(){
pattern = /^\d{17}[0-9x]$/;
if(!id.value){
tips[4].innerHTML = "身份证号码不能为空";
tips[4].style.color = "red";
}else if(!pattern.exec(id.value)){
// 判断输入的内容是否符合正则
tips[4].innerHTML = "请输入与15位或者18位的数字，18位时最后一位用x表示";
tips[4].style.color = "red";
}else{
tips[4].innerHTML = "ok";
tips[4].style.color = "red";
test5 = true;
}
}
email.onblur = function(){
pattern = /^[a-z0-9]+(?:[.-_][a-z0-9]+)*@[a-z0-9]+([.-_][a-z0-9]+)*\.[a-z]{2,4}$/;
if(!email.value){
tips[5].innerHTML = "邮箱不能为空";
tips[5].style.color = "red";
}else if(!pattern.exec(email.value)){
// 判断输入的内容是否符合正则
tips[5].innerHTML = "请输入您的邮箱";
tips[5].style.color = "red";
}else{
tips[5].innerHTML = "ok";
tips[5].style.color = "red";
test7 = true;
}
}
phone.onblur = function(){
pattern = /^(?:13[0-9]|147|15[012356789]|18[0256789])\d{8}$/;
if(!phone.value){
tips[6].innerHTML = "手机号码不能为空";
tips[6].style.color = "red";
}else if(!pattern.exec(phone.value)){
// 判断输入的内容是否符合正则
tips[6].innerHTML = "请输入11位手机号码";
tips[6].style.color = "red";
}else {
tips[6].innerHTML = "ok";
tips[6].style.color = "red";
test6 = true;
}
}
submit.onclick = function(){
if(test1 == false || test2 == false || test3 == false||test4 == false
test5 == false||test6 == false){
alert("您填写的信息有误");
}else{
alert("确认提交");
}
}
</script>
</html>老师，我的问题是，为什么用table不能实现表格内容的右对齐呢，我想让我的页面左边的内容实现右对齐。
0
收起
正在回答
2回答
同学你好， 可以通过给td设置高度实现上下间距， 另， 可以给td的子元素input和select设置左外边距实现与左侧的空白间距
同学整体布局挺好的， 就是在CSS样式的实现上有些复杂， 修改后就很好了
另， 代码中存在的问题如下
声明变量应该是布尔值， 你这里使用引号包裹变成了字符串， 建议修改：
在失去焦点输入不正确的情况下， 也需要调整对应的布尔值为false， 这里以用户名为例， 其他的同学可以自己添加上
如下图所示， 少写了一个逻辑或运算符， 建议添加上
如果还有疑惑，再次提问， 我们会继续为你解答的
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
相似问题
老师，第2章 内部类的编程练习呢，是不是漏了
23
0
3
老师，我的问题是本节的4-8编程练习。
0
1
4
编程练习的答案呢
0
0
3
在编程练习的时候，输入中文的时候老有问题。
41
0
15
编程练习.。
0
0
2
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星