//获取元素的
var ele={
myImooc:document.querySelector(".myImooc"),
imooc_list:document.getElementById("imooc_list"),
user:document.getElementById("user"),
userpass:document.getElementById("userpass"),
confirm:document.getElementById("confirm"),
chinaname:document.getElementById("chinaname"),
cert:document.getElementById("cert"),
id_number:document.getElementById("id_number"),
email:document.getElementById("email"),
phonenumber:document.getElementById("phonenumber"),
passengers:document.getElementById("passengers"),
read:document.getElementById("read"),
next:document.getElementById("next"),
prompt:document.querySelectorAll(".prompt"),//表单检验提示节点
pass_val:document.querySelector(".pass_val"),//密码验证节点
nameset:document.querySelector(".nameset"),
nameset_text:document.querySelector(".nameset_text")
}
//正则集合对象
var formRegexp={
user:/^[a-z]\w{5,29}$/i,
userpass1:/^[a-z]{6,20}$|[0-9]{6,20}$|[~!@#$%&*+?-_]{6,20}$/i,
userpass2:/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$|^(?=.*[A-Za-z])(?=.*[~!@#$%&*+_?])[A-Za-z~!@#$%&*+_?]{6,20}$|^(?=.*[~!@#$%&*+_?])(?=.*\d)[~!@#$%&*+_?\d]{6,20}$/,
userpass3:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%&*+?-_])[A-Za-z0-9~!@#$%&*+?_-]{6,20}$/,
chinaname:/^[\u4e00-\u9fa5]{2,15}$|^[a-z]{3,30}$/i,
id_number:/^\d{17}([xX]|\d)$/,
email:/^[a-z0-9-_]+@[a-z0-9-_]+\.[a-z0-9-_]{2,}$/i,
phonenumber:/^(13)[0-9]{9}$/
}
//验证开关
var text1=false,
text2=false,
test3=false,
test4=false,
test5=false,
test6=false,
test7=false;
//用自执行封装
(function(){
//导航imooc绑定事件
ele.myImooc.addEventListener("mouseover",function(){
ele.imooc_list.style.display="block";
console.log(ele.myImooc.after);
})
ele.myImooc.addEventListener("mouseout",function(){
ele.imooc_list.style.display="none";
})
//表单绑定事件
ele.user.addEventListener("blur",function(){
if(formRegexp.user.test(ele.user.value)){
ele.prompt[0].innerHTML="用户名输入正确"
ele.prompt[0].style.color="green";
text1=true;
}else{
ele.prompt[0].style.color="red";
}
})
ele.userpass.addEventListener("blur",function(){
console.log(formRegexp.userpass2.exec(ele.userpass.value));
console.log(ele.pass_val.children[1]);
if(ele.userpass.value==""){
ele.prompt[1].innerHTML="6-20位字母，数字或符号"
ele.prompt[1].style.color="red";
}else if(formRegexp.userpass1.test(ele.userpass.value)){
ele.prompt[1].innerHTML="";
text2=true;
}else if(formRegexp.userpass2.test(ele.userpass.value)){
ele.pass_val.children[1].style.background="orange";
ele.pass_val.children[2].style.background="gray";
ele.prompt[1].innerHTML="";
text2=true;
}else if(formRegexp.userpass3.test(ele.userpass.value)){
ele.pass_val.children[1].style.background="orange";
ele.pass_val.children[2].style.background="green";
ele.prompt[1].innerHTML="";
text2=true;
}
})
ele.confirm.addEventListener("blur",function(){
if(ele.confirm.value==""){
ele.prompt[2].innerHTML="输入框不能为空";
ele.prompt[2].style.color="red";
}else if(ele.confirm.value==ele.userpass.value){
ele.prompt[2].innerHTML="两次输入一致";
ele.prompt[2].style.color="green";
text3=true;
}else if(ele.confirm.value!=ele.userpass.value){
ele.prompt[2].innerHTML="两次密码输入不一致，请重新输入";
ele.prompt[2].style.color="red";
}
})
ele.chinaname.addEventListener("blur",function(){
if(!formRegexp.chinaname.test(ele.chinaname.value)){
ele.prompt[3].innerHTML="姓名只能包含中文或者英文，且中文字符在2-15之间，英文字符在3-30个之间";
ele.prompt[3].style.color="red";
}else{
ele.prompt[3].innerHTML="姓名输入正确";
ele.prompt[3].style.color="green";
text4=true;
}
})
ele.id_number.addEventListener("blur",function(){
if(ele.id_number==""){
ele.prompt[5].innerHTML="证件号码不能为空";
ele.prompt[5].style.color="red";
}else if(!formRegexp.id_number.test(ele.id_number.value)){
ele.prompt[5].innerHTML="请输入18位证件号码";
ele.prompt[5].style.color="red";
}else{
ele.prompt[5].innerHTML="证件号码正确";
ele.prompt[5].style.color="green";
text5=true;
}
})
ele.email.addEventListener("blur",function(){
if(ele.email.value==""){
ele.prompt[6].innerHTML="邮箱地址不能为空";
ele.prompt[6].style.color="red";
}else if(!formRegexp.email.test(ele.email.value)){
ele.prompt[6].innerHTML="请输入有效邮箱地址";
ele.prompt[6].style.color="red";
}else{
ele.prompt[6].innerHTML="邮箱格式正确";
ele.prompt[6].style.color="green";
text6=true;
}
})
ele.phonenumber.addEventListener("blur",function(){
if(ele.phonenumber.value==""){
ele.prompt[7].innerHTML="手机号码不能为空";
ele.prompt[7].style.color="red";
}else if(!formRegexp.phonenumber.test(ele.phonenumber.value)){
ele.prompt[7].innerHTML="请输入有效手机号码";
ele.prompt[7].style.color="red";
}else{
ele.prompt[7].innerHTML="手机格式正确";
ele.prompt[7].style.color="green";
test7=true;
}
})
//姓名规则绑定事件
ele.nameset.addEventListener("click",function(){
ele.nameset_text.style.display="block";
})
ele.nameset_text.addEventListener("mouseout",function(){
ele.nameset_text.style.display="none";
})
//read开关
ele.read.addEventListener("change",function(){
if(ele.read.checked==true){
ele.next.disabled=false;
ele.next.className="next1";
}else{
ele.next.disabled=true;
ele.next.className="next2";
}
})
//next事件
var arr=[];
ele.next.addEventListener("click",function(){
if(text1&&text2&&text3&&text4&&text5&&text6&&text7){
arr.push(ele.user.value).push(ele.userpass.value).push(ele.chinaname.value).push(ele.cert.value).push(ele.id_number.value).push(ele.email.value).push(ele.phonenumber.value).push(ele.passengers.value);
return window.location.href="http://www.imooc.com";
}else{
alert("输入有误");
}
})
console.log(arr);
})()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>中国铁路客服中心</title>
<link rel="stylesheet" href="css/csstext.css">
</head>
<body>
<div class="top">
<div class="logo"><img src="img/logo.png" alt="logo"><p>慕课高铁客户服务中心|<span>客户服务</span></p></div>
<div class="login">
意见反馈<a href="#">imooc@com</a>&nbsp;&nbsp;&nbsp;&nbsp;你好，请<a href="#">登录</a>|<a class="registered" href="#">注册</a>
<span class="myImooc">我的IMOOC
<div id="imooc_list">
<ul>
<li>未完成订单</li>
<li>已完成订单(改/退)</li>
<li>我的保险</li>
<li>查看个人信息</li>
<li>账户安全</li>
<li>常用联系人</li>
<li>重点旅客预定</li>
<li>遗失物品查找</li>
<li>服务查询</li>
<li>投诉</li>
<li>建议</li>
</ul>
</div>
</span>
<span><img src="img/未标题-1.png" alt="">手机版</span>
</div>
</div>
<div class="main">
<div class="loginViev">
<p>你现在的位置：<span>客运首页&gt;注册</span></p>
<div class="loginform">
<div>账户信息</div>
<form id="form">
<table>
<tr>
<td width="70px" align="right">用户名:</td>
<td width="207px"><input type="text" class="input" name="" id="user" placeholder="用户设置成功后不能修改"></td>
<td><span class="prompt">6-30位字母，数字或符合</span></td>
</tr>
<tr>
<td align="right">登录密码:</td>
<td><input type="password" class="input" name="" id="userpass" placeholder="6-20位数字，字母或符合"><p class="prompt"></p></td>
<td>
<div class="pass_val">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><input type="password" class="input" name="" id="confirm" placeholder="再次输入你的登录密码"></td>
<td><span class="prompt"></span></td>
</tr>
<tr>
<td align="right">姓名:</td>
<td><input type="text" class="input" name="" id="chinaname" placeholder="请输入姓名"></td>
<td>
<span class="prompt nameset">姓名填写规则
<div class="nameset_text">
<p>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。</p>
<p>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。</p>
<p>3.姓名中有繁体字无法输入时，可用简体替代。</p>
<p>4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写</p>
</div>
</span>
</td>
</tr>
<tr>
<td align="right">证件类型:</td>
<td>
<select name="" id="cert">
<option value="china_id">二代身份证</option>
<option value="hk_id">港澳通行证</option>
<option value="driver">台湾通行证</option>
<option value="passport">护照</option>
</select>
</td>
<td><span class="prompt"></span></td>
</tr>
<tr>
<td align="right">证件号码:</td>
<td><input type="text" class="input" name="" id="id_number" placeholder="请输入你的证件号码"></td>
<td><span class="prompt"></span></td>
</tr>
<tr>
<td align="right">邮箱:</td>
<td><input type="text" class="input" name="" id="email" placeholder="请正确填写邮箱地址"></td>
<td><span class="prompt"></span></td>
</tr>
<tr>
<td align="right">手机号码:</td>
<td><input type="text" class="input" name="" id="phonenumber" placeholder="请输入你的手机号码"></td>
<td><span class="prompt">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span></td>
</tr>
<tr>
<td align="right">旅客类型</td>
<td>
<select name="" id="passengers">
<option value="adult">成人</option>
<option value="studen">学生</option>
<option value="children">儿童</option>
<option value="handicapped_militiry">残疾军人</option>
<option value="handicapped_police">伤残人民警察</option>
</select>
</td>
<td><span class="prompt"></span></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="checkbox" name="" id="read">我已阅读并遵
<a href="#">《中国铁路客户服务中心网站服务条款》</a>
</td>
</tr>
</table>
<button class="next2" id="next" disabled>下一步</button>
</form>
</div>
</div>
</div>
<div class="bottom">
<p>关于我们|网站声明</p>
<p>copyright&nbsp;@&nbsp;2017&nbsp;imooc.com&nbsp;All&nbsp;Rights&nbsp;Reserved&nbsp;|&nbsp;京ICP备13046642号-2</p>
</div>
<script src="javascript/from.js"></script>
</body>
</html>