老师，请看看我代码怎么样；

来源：4-8 编程练习

宝慕林4199460

2019-07-05 22:39:24

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Document我的</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#wrap{
width: 1000px;
margin:100px auto;
}
#wrap .title{
background-color: lightblue;
color:#fff;
font-size: 18px;
padding: 5px 0px;
text-indent: 20px;
}
form{
background-color: #eee;
}
form p {
padding: 10px 0;
text-align: center;
}
form p label{
display: inline-block;
text-align: right;

}
form #submitBtn{
width: 80px;
height: 40px;
background-color: blue;
color: #fff;
border-radius: 8px;
}

</style>
</head>
<body>
<div id="wrap">
<p class="title">用户注册</p>
<form>
<p>
<label for="userAccount">用户名：</label>
<input type="text" id="userAccount"><span></span>
</p>

<p>
<label for="psw">登录密码：</label>
<input type="password" id="psw"><span></span>
</p>
<p>
<label for="confirmpsw">确认密码：</label>
<input type="password" id="confirmpsw"><span></span>
</p>
<p>
<label for="chinesename">姓名：</label>
<input type="text" id="chinesename"><span></span>
</p>
<p>
<label for="sex">性别：</label>
<select id="sex">
<option value="male">男</option>
<option value="female">女</option>
</select>
</p>

<p>
<label for="identity">身份证号码：</label>
<input type="text" id="identity"><span></span>
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" id="email"><span></span>
</p>
<p>
<label for="phone">手机号码：</label>
<input type="text" id="phone"><span></span>
</p>
<p>
<input type="button" id="submitBtn" value="提交">
</p>
</form>
</div>
<script type="text/javascript">
var spans = document.querySelectorAll("span"),
userAccount = document.getElementById("userAccount"),
psw = document.getElementById("psw"),
confirmpsw = document.getElementById("confirmpsw"),
chinesename = document.getElementById("chinesename"),
identity = document.getElementById("identity"),
email = document.getElementById("email"),
phone = document.getElementById("phone");
var regexp =/正则/;
var input1 = false;
var input2 = false;
var input3 = false;
var input4 = false;
var input5 = false;
var input6 = false;
var input7 = false;


//用户名
userAccount.onfocus = function(){
spans[0].innerHTML= "6-20位字母、数字、或'_',字母开头";
}
userAccount.onblur = function(){
regexp =/^[a-zA-Z]\w{5,19}$/;
if(this.value==""){
spans[0].innerHTML= "6-20位字母、数字、或'_',字母开头";
spans[0].style.color = "red";
}else{
if(!regexp.exec(userAccount.value)){
spans[0].innerHTML= "用户名错误";
spans[0].style.color = "red";
}else{
spans[0].innerHTML= "OK";
spans[0].style.color= "green";
input1 = true;
}
}
}
//登录密码
psw.onfocus = function(){
spans[1].innerHTML= "数字、字母或者符号，中间不能有空格";
}
psw.onblur = function(){
regexp = /^\S{6,18}$/;
if(this.value==""){
spans[1].innerHTML= "数字、字母或者符号，中间不能有空格";
spans[1].style.color = "red";
}else{
if(!regexp.exec(psw.value)){
spans[1].innerHTML= "登录密码错误";
spans[1].style.color = "red";
}else{
spans[1].innerHTML= "OK";
spans[1].style.color= "green";
input2 = true;
}
}
}
//确认密码
confirmpsw.onfocus = function(){
spans[2].innerHTML= "请再次输入密码";
}
confirmpsw.onblur = function(){
regexp = /^\S{6,18}$/;
if(this.value==""){
spans[2].innerHTML= "请再次输入密码";
spans[2].style.color = "red";
}else{
if(this.value != psw.value){
spans[2].innerHTML= "两次输入密码不同";
spans[2].style.color = "red";
}else{
spans[2].innerHTML= "OK";
spans[2].style.color= "green";
input3 = true;
}
}
}
//姓名
chinesename.onfocus = function(){
spans[3].innerHTML= "请输入2-4位真实姓名";
}
chinesename.onblur = function(){
regexp = /^[\u4e00-\u9fa5]{2,4}$/;
if(this.value==""){
spans[3].innerHTML= "请输入2-4位真实姓名";
spans[3].style.color = "red";
}else{
if(!regexp.exec(chinesename.value)){
spans[3].innerHTML= "姓名错误";
spans[3].style.color = "red";
}else{
spans[3].innerHTML= "OK";
spans[3].style.color= "green";
input4 = true;
}
}
}
//身份证号码
identity.onfocus = function(){
spans[4].innerHTML= "请输入15-18位身份证号码";
}
identity.onblur = function(){
regexp = /^\d{14,17}[0-9X]$/;
if(this.value==""){
spans[4].innerHTML= "请输入15-18位身份证号码";
spans[4].style.color = "red";
}else{
if(!regexp.exec(identity.value)){
spans[4].innerHTML= "身份证号码错误";
spans[4].style.color = "red";
}else{
spans[4].innerHTML= "OK";
spans[4].style.color= "green";
input5 = true;
}
}
}
//邮箱，12323@qq.com、lulu_s@open.com、lu_lu_z@qq.com.cn
email.onfocus = function(){
spans[5].innerHTML= "请输入邮箱";
}
email.onblur = function(){
regexp = /^\w+@\w+\.[a-zA-Z]{2,4}$/;
if(this.value==""){
spans[5].innerHTML= "请输入邮箱";
spans[5].style.color = "red";
}else{
if(!regexp.exec(email.value)){
spans[5].innerHTML= "邮箱错误";
spans[5].style.color = "red";
}else{
spans[5].innerHTML= "OK";
spans[5].style.color= "green";
input6 = true;
}
}
}
//手机号码
phone.onfocus = function(){
spans[6].innerHTML= "请输手机号";
}
phone.onblur = function(){
//不分运营商，前三位可以分为三种情况 13x,15x,18x;
//13[0-9];14[7];15[012356789],仅154开头没有;18[0256789]
regexp = /^(?:13[0-9]|147|15[012356789]|18[0256789])\d{8}$/;
if(this.value==""){
spans[6].innerHTML= "请输手机号";
spans[6].style.color = "red";
}else{
if(!regexp.exec(phone.value)){
spans[6].innerHTML= "手机号错误";
spans[6].style.color = "red";
}else{
spans[6].innerHTML= "OK";
spans[6].style.color= "green";
input7 = true;
}
}
}
//提交按钮
submitBtn.onclick = function(){
if (input1 && input2 && input3 && input4 && input5 && input6 && input7) {
alert("提交成功");
}else{
alert("验证失败");
}
}

</script>
</body>
</html>

老师，我有几个问题；

1，怎么让文字和输入框对齐呢

2，我的正则都对吗，最后验证是否正确

写回答

1回答