老师帮忙看看：按钮input、select框样式；左文字和input框对齐；js代码怎么修改整齐

来源：4-8 编程练习

qq_杨贵妃_0

2019-11-22 17:03:23

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4-8编程练习</title>
<style>
*{padding: 0;margin: 0}
#formCation{width: 1000px;margin: 50px auto;}
#formCation label{
float: left;
width: 120px;
text-align: right;
margin-right: 20px;
}
#formCation .item{margin: 10px}
#formCation input,select{
outline: none;
width: 300px;
height: 30px;
padding-left: 10px;
}
#formCation .item span{margin-left: 20px;color: red;}
#formCation #btn{
margin-left: 150px;
}
</style>
</head>
<body>

<div id="formCation">
<div class="item" id="userBox">
<label>用户名: </label><input value="" id="userInput" placeholder="请输入用户名"/>
<span class="info" id="userInfo"></span>
</div>
<div class="item" id="loginPassBox">
<label>请输入密码: </label><input value="" id="loginPassInput" placeholder="请输入密码"/>
<span class="info" id="loginPassInfo"></span>
</div>
<div class="item" id="againPassBox">
<label>请再次输入密码: </label><input value="" id="againPassInput" placeholder="请再次输入密码"/>
<span class="info" id="againPassInfo"></span>
</div>
<div class="item" id="nameBox">
<label>姓名: </label><input value="" id="nameInput" placeholder="请输入姓名"/>
<span class="info" id="nameInfo"></span>
</div>
<div class="item" id="sexBox">
<label>性别: </label>
<select name="sex" id="sex">
<option value="nan">男</option>
<option value="nv">女</option>
</select>
</div>

<input type="button" id="btn" value="提交">
</div>
<script type="text/javascript">
var formCation = document.querySelector('#formCation'),
btn =formCation.querySelector('#btn'),
userInput =formCation.querySelector('#userInput'),
loginPassInput =formCation.querySelector('#loginPassInput'),
userInfo =formCation.querySelector('#userInfo'),
loginPassInfo =formCation.querySelector('#loginPassInfo'),
againPassInput=formCation.querySelector('#againPassInput'),
againPassInfo=formCation.querySelector('#againPassInfo'),
nameInput=formCation.querySelector('#nameInput'),
nameInfo=formCation.querySelector('#nameInfo');
//点击函数
btn.onclick=function(){
if(obj.value==''){
return;
}else{
userInputBox();
loginPassBox();
decide();
Name();
}
};

//失去焦点函数
function onBlur(obj,fn) {
obj.onblur=function(){
if(obj.value==''){
return;
}else{
fn();
}
};
}

//用户名
function userInputBox(){
var userPttert =userInput.value ;
//6-20位字母、数字或“_”,字母开头
var userStr = new RegExp(/^[a-z]\w{2,15}$/,'ig');
userInfo.innerHTML= '';
userStr.test(userPttert)?userInfo.innerHTML='OK':userInfo.innerHTML="6-20位字母、数字或“_”,字母开头";
};
onBlur(userInput,userInputBox);

//密码
function loginPassBox(){
var loginPassStr = loginPassInput.value;
//密码6-18位，包括数字字母或符号，中间不能有空格
var loginPassPttert = new RegExp(/^\S{6,18}$/);
loginPassPttert.test(loginPassStr)?loginPassInfo.innerHTML='OK':loginPassInfo.innerHTML="密码6-18位，包括数字字母或符号，中间不能有空格";
}
onBlur(loginPassInput,loginPassBox);

//再次输入密码
function decide() {
againPassInput.value == loginPassInput.value?againPassInfo.innerHTML='OK':againPassInfo.innerHTML='两次输入密码不一致';
}
onBlur(againPassInput,decide);

//姓名
function Name() {
var nameStr = nameInput.value;
var namePttert = new RegExp(/^[\u4e00-\u9fa5]{1,4}$/);
namePttert.test(nameStr)?nameInfo.innerHTML='OK':nameInfo.innerHTML="请输入真实姓名";
}
onBlur(nameInput,Name);

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