①onsubmit 表单提交事件
return false 表单不提交
return true 表单提交
②<form action="" method=" get/post">
action:提交路径 (将数据提交到远程服务器上)
method:提交方式,需要加name属性
get:显示提交(信息会在路径栏出现)
post:信息在Network栏显示
③密码显示问题
将文本框类型由password变为text
④利用call和apply替换前边函数中的this
⑤checked为选择属性
选择上了为true,未选择上为false
⑥input文本框
①类型:text password checkbox(勾选) submit radio
radio
给同一等级的input加上相同的name属性,这样去点击一个,其他的会自动消失
对象.click() 默认选中
②placeholder(虚) value(实)
③user.focus() 让事件获得焦点
focus()为方法
onfocus为事件属性,表示获得焦点后去执行什么
⑦trim()去除空格
⑧去除Input点击上去出现的蓝边框 outline:none;
去除a标签的下划线:text-decoration:none;
去除i标签的倾斜:font-style:normal;
⑨其中输入错误才出现的提示用display为block和none写
⑩大体步骤
① 先写表单提交事件
只有当同意并阅读那一栏被点击才可以提交
然后上边的文本框的输入都没有错误才可以提交
②文本框验证:点击提交的时候,先让所有的文本框依次获得焦点,在文本框失焦的时候进行验证
给每个需要判断的文本框加一个id属性,当表单失焦的时候,用call获取文本框的id
③写自定义对象,自定义对象中分别验证每个文本框中的内容
下边是12306火车票注册代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>中国铁路12306</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body{
background-color: #dedede;
}
.box{
background-color: white;
margin:auto ;
text-align: center;
height: auto;
width: 1000px;
border: solid 4px #a7c7ee;
}
ul{
padding-top: 20px;
padding-bottom: 20px;
margin: auto;
width:620px;
height: auto;
border: solid 1px transparent;
}
i{
color: orange;
font-size: 13px;
font-style: normal; /*去除i标签倾斜样式*/
position: absolute;
top: 14px;
left: 327px;
}
.paw{
display: inline-block; position: absolute;
top:10px;
left: 327px;
}
.paw>div{
display: inline-block;
width: 30px;
height: 8px;
background-color: #dedede;
}
.paw>div:first-of-type{
background-color: red!important;
}
li{
position: relative;
width:626px;
height: 40px;
text-align: center;
}
input{
position: absolute;
top:6px;
left: 120px;
padding-left: 5px;
outline: none;
}
input[type="text"],input[type="password"]{
width: 200px;
height: 28px;
border:solid 1px #d0d0d0;
}
input[type="submit"]{
border: none;
border-radius: 5px;
width: 80px;
height:30px;
}
select{
width: 200px;
height: 28px;
border:solid 1px #d0d0d0;
position: absolute;
top: 10px;
left: 120px;
outline: none;
}
.sub{
width: 150px;
height: 50px;
background-color: orange;
}
.ck{
font-size: 13px;
}
a{
color: #3dc5ff;
cursor: pointer;
}
u{
padding-right: 6px;
}
.xing{
position: absolute;
font-size: 13px;
display: inline-block;
top: 14px;
right:507px;
width: 130px;
text-align: right;
}
.four{
position: absolute;
top: 4px;
left: 136px;
font-size: 13px;
}
img{
width: 15px;
height: 12px;
position: absolute;
top: 14px;
left: 300px;
}
.success{
display: none;
}
.error{
display: block;
}
.divele{
font-size: 12px;
color: red;
width: 430px;
height: 15px;
margin-left: 118px;
text-align: left;
}
#sex>input:first-of-type{
top: 16px;
left: 120px;
}
#sex>input:last-of-type{
top: 16px;
left: 200px;
}
#sex>span:first-of-type{
position: absolute;
top: 10px;
left: 138px;
}
#sex>span:last-of-type{
position: absolute;
top: 10px;
left: 219px;
}
.stuyouhui input{
display: inline-block;
width: 90px;
height: 30px;
}
.stuyouhui span{
position: absolute;
top: 9px;
left: 212px;
}
.stuyouhui input:first-of-type{
top: 7px;
left: 120px;
}
.stuyouhui input:last-of-type{
top: 7px;
left: 235px;
}
</style>
</head>
<body>
<div class="box">
<form action="" method="get" class="userform">
<ul>
<li><div class="xing">用户名:</div>
<input type="text" placeholder="用户名设置成功后不可更改"class="useritem" name="userid" id="userid"/>
<i>6-30位字母,数字或"_",字母开头</i>
</li>
<div class="divele success">请输入用户名!</div> <!--一定要注意定位问题-->
<li><div class="xing">登录密码:</div>
<input type="password" placeholder="6-20位字母,数字或字符"class="useritem" name="userpaw" id="userpaw"/>
<img src="img/eye1.png" alt="" class="two"/>
<div class="paw">
<div></div>
<div></div>
<div></div>
</div>
</li>
<div class="divele success">请输入密码!</div>
<li><div class="xing">确认密码:</div>
<input type="password" placeholder="再次输入您的登录密码"class="useritem" name="userpaw2" id="userpaw2"/>
<img src="img/eye1.png" alt="" class="two"/>
</li>
<div class="divele success">请输入确认密码!</div>
<li><div class="xing">证件类型:</div>
<select name="" class="select1">
<option selected>中国居民身份证</option>
<option>港澳居民来往内地通行证</option>
<option>台湾居民来往大陆通行证</option>
<option>护照</option>
</select>
</li>
<li class="san"> <!--加相同的name,则每次只可以选中一个-->
<input type="radio" class="three" name="name1" />
<span class="four" >中国居民身份证</span>
</li>
<li class="san">
<input type="radio" class="three" name="name1"/>
<span class="four">外国人永久居留身份证</span>
</li>
<li class="san">
<input type="radio" class="three" name="name1"/>
<span class="four">港澳台居民居住证</span>
</li>
<li><div class="xing">姓名:</div>
<input type="text" placeholder="请输入姓名" class="useritem" name="username" id="username"/>
<i><a>姓名填写规则</a>(用于身份验证,请正确填写)</i>
</li>
<div class="divele success">请输入您的姓名!</div>
<li><div class="xing">证件号码:</div>
<input type="text" placeholder="请输入您的证件号码" class="useritem" name="userNum" id="userNum"/>
<i>(用于身份验证,请正确填写)</i>
</li>
<div class="divele success">请输入证件号码!</div>
<li class="add1 success">
<div class="xing">证件有效期截止日期:</div>
<input type="text"/>
<i>(用于身份核验,请正确填写)</i>
</li>
<li class="add1 success">
<div class="xing">出生日期:</div>
<input type="text"/>
<i>(用于身份核验,请正确填写)</i>
</li>
<li class="add1 success" id="sex">
<div class="xing">性别:</div>
<input type="radio" class="xuanze" name="name2"/>
<span>男</span>
<input type="radio" class="xuanze" name="name2"/>
<span>女</span>
</li>
<li class="china success">
<div class="xing">国家/地区:</div>
<select name="">
<option selected>中国</option>
<option>韩国</option>
<option>日本</option>
<option>美国</option>
</select>
</li>
<li>
<div class="xing">邮箱:</div>
<input type="text" placeholder="请正确填写邮箱地址" class="useritem" name="useremil" id="useremil"/>
</li>
<div class="divele success">请输入邮箱!</div>
<li class="student">
<div class="xing">手机号码(+86):</div>
<input type="text" placeholder="请输入您的手机号码" class="useritem" name="usertel " id="usertel"/>
<i>请正确填写号码,稍后将向该手机号发送短信验证码</i>
</li>
<div class="divele success">请输入手机号码!</div>
<li>
<div class="xing">旅客类型:</div>
<select name="" class="select2">
<option>成人</option>
<option>儿童</option>
<option>学生</option>
<option>残疾军人,伤残人民警察</option>
</select>
</li>
<li class="student" style="display: none">
<div class="xing">学校所在省份:</div>
<select name="">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>陕西</option>
</select>
</li>
<li class="student" style="display: none">
<div class="xing">学校名称:</div>
<input type="text" placeholder="简码/汉字" class="useritem" name="useremil"/>
</li>
<li class="student" style="display: none">
<div class="xing">院系:</div>
<input type="text" class="useritem" />
</li>
<li class="student" style="display: none">
<div class="xing">班级:</div>
<input type="text" />
</li>
<li class="student" style="display: none">
<div class="xing">学号:</div>
<input type="text" />
</li>
<li class="student" style="display: none">
<div class="xing">学制:</div>
<select name="">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</li>
<li class="student" style="display: none">
<div class="xing">入学年份:</div>
<select name="">
<option>2019</option>
<option>2018</option>
<option>2017</option>
<option>2016</option>
<option>2015</option>
</select>
</li>
<li class="student" style="display: none">
<div class="xing">优惠卡号:</div>
<input type="text"/>
</li>
<li class="stuyouhui student" style="display: none">
<div class="xing">优惠区间:</div>
<input type="text" placeholder="简码/汉字"/>
<span>—</span>
<input type="text" placeholder="简码/汉字" />
<i>填写与学生证一致的优惠区间(选择车站所在城市)</i>
</li>
<li class="ck">
<input type="checkbox" class="check"/>
<span class="four">我已阅读并同意遵守
<a href="">《中国铁路客户服务中心网站服务条款》</a>
<a href="">《隐私权政策》</a>
</span>
</li>
<li>
<input type="submit" value="下一步" class="sub"/>
</li>
</ul>
</form>
</div>
<script>
var userform=document.getElementsByClassName("userform")[0]; //表单
var divthree=document.getElementsByClassName("paw")[0].children; //密码颜色变化
var three=document.getElementsByClassName("three"); //三个按钮
var two=document.getElementsByClassName("two"); //两个眼睛
var check=document.getElementsByClassName("check")[0];
var sub=document.getElementsByClassName("sub")[0];
var useritem=document.getElementsByClassName("useritem");
var divele=document.getElementsByClassName("divele");
var select1=document.getElementsByClassName("select1")[0];
var select2=document.getElementsByClassName("select2")[0];
var san=document.getElementsByClassName("san");
var add1=document.getElementsByClassName("add1");
var xuanze=document.getElementsByClassName("xuanze");
var china=document.getElementsByClassName("china")[0];
var student=document.getElementsByClassName("student");
//console.log(useritem.length);
var user={
userid:function(){
if(this.value){ //里边写了东西
console.log(this.value.match(/\s/)); // /^\s$/ 不用加^ $
console.log(this.value);
if(this.value.match(/\s/)){ //里边有空格
this.style.borderColor="red";
divele[this.index].className="divele error";
divele[this.index].innerHTML=" 用户名中不能包含空格!";
}
else{
if(this.value.length>6&&this.value.length<=30){
if(this.value.match(/^[a-zA-Z]+\d+[_]+$/)||this.value.match(/^[a-zA-Z]+[_]+\d+$/)){
divele[this.index].className="divele success";
this.style.borderColor=" #d0d0d0";
}
else{
this.style.borderColor="red";
divele[this.index].className="divele error";
divele[this.index].innerHTML="用户名只能由字母、数字和_组成,须以字母开头!";
}
}
else{
divele[this.index].innerHTML="用户名长度不能少于6个字符!";
this.style.borderColor="red";
divele[this.index].className="divele error";
}
}
}
else{
this.style.borderColor="red";
divele[this.index].className="divele error";
divele[this.index].innerHTML=" 请输入用户名!";
}
},
userpaw:function(){
if(this.value){ //里边写了东西
if(this.value.match(/\s/)){
divele[this.index].innerHTML="输入的密码中不能包含空格!";
this.style.borderColor="red";
divele[this.index].className="divele error";
}
else{ //里边没有空格
if(this.value.length>=6){ //正则里边或是单个 | 其他或是 ||
if(this.value.match(/^[0-9]+$/)||this.value.match(/^[_]+$/)||this.value.match(/^[A-Za-z]+$/)){ //写正方向太难,写反方向
divele[this.index].className="divele error";
divele[this.index].innerHTML="格式错误,必须且只能包含字母,数字,下划线中的两种或两种以上!";
this.style.borderColor="red";
}
else if(this.value.match(/^[A-Za-z]+[0-9]+[_]+$/)||this.value.match(/^[A-Za-z]+[_]+[0-9]+$/)||this.value.match(/^[_]+[A-Za-z]+[0-9]+$/)
||this.value.match(/^[0-9]+[A-Za-z]+[_]+$/)||this.value.match(/^[0-9]+[_]+[A-Za-z]+$/)||this.value.match(/^[_]+[0-9]+[A-Za-z]+$/)){
divele[this.index].className="divele success";
this.style.borderColor=" #d0d0d0";
}
else{ //有字母,数字,下划线中的两种或两种以上
divele[this.index].className="divele success";
this.style.borderColor=" #d0d0d0";
}
}
else{
divele[this.index].innerHTML="密码长度不能少于6个字符!";
this.style.borderColor="red";
divele[this.index].className="divele error";
}
}
}
else{
this.style.borderColor="red";
divele[this.index].className="divele error";
divele[this.index].innerHTML=" 请输入密码!";
}
},
userpaw2:function(){
if(this.value){ //里边写了东西
if(this.value==useritem[this.index-1].value){ //里边写了东西
divele[this.index].className="divele success";
this.style.borderColor=" #d0d0d0";
}
else{
this.style.borderColor="red";
divele[this.index].className="divele error";
divele[this.index].innerHTML=" 确认密码与密码不同!"
}
}
else{
this.style.borderColor="red";
divele[this.index].className="divele error";
divele[this.index].innerHTML="请输入确认密码!";
}
},
username:function(){
if(this.value){ //里边写了东西
if(this.value.match(/^\w+$/)){
this.style.borderColor="red";
divele[this.index].className="divele error";
divele[this.index].innerHTML="姓名只能包含中文或者英文,如有生僻字或繁体字参见姓名填写规则进行填写!";
}
else{
divele[this.index].className="divele success";
this.style.borderColor=" #d0d0d0";
}
}
else{
this.style.borderColor="red";
divele[this.index].className="divele error";
}
},
userNum:function(){
if(this.value){ //里边写了东西
if(this.value.match(/^\d{17}[0-9X]{1}$/)){
divele[this.index].className="divele success";
this.style.borderColor=" #d0d0d0";
}
else{
this.style.borderColor="red";
divele[this.index].className="divele error";
divele[this.index].innerHTML="请正确输入18位的证件号码!";
}
}
else{
this.style.borderColor="red";
divele[this.index].className="divele error";
divele[this.index].innerHTML="请输入证件号码!";
}
},
useremil:function(){
if(this.value){ //里边写了东西
if(this.value.match(/^\w{5,10}\@((qq)|(163))\.((com)|(cn))$/)){
divele[this.index].className="divele success";
this.style.borderColor=" #d0d0d0";
}
else{
this.style.borderColor="red";
divele[this.index].className="divele error";
divele[this.index].innerHTML="请输入有效的电子邮件地址!";
}
}
else{
this.style.borderColor="red";
divele[this.index].className="divele error";
divele[this.index].innerHTML="请输入邮箱!";
}
},
usertel:function(){
if(this.value){ //里边写了东西
if(this.value.match(/^[1]{1}[34578]{1}[0-9]{9}$/)){
divele[this.index].className="divele success";
this.style.borderColor=" #d0d0d0";
}
else{
divele[this.index].className="divele error";
this.style.borderColor="red";
divele[this.index].innerHTML="您输入的手机号不是有效格式!";
}
}
else{
this.style.borderColor="red";
divele[this.index].className="divele error";
divele[this.index].innerHTML="请输入手机号码!";
}
}
}
//console.log(divthree);
//密码颜色变化事件 添加按键事件
useritem[1].onkeyup=function(){
if(useritem[1].value.length>=6){
if(useritem[1].value.match(/^[A-Za-z]+[0-9]+[_]+$/)||useritem[1].value.match(/^[A-Za-z]+[_]+[0-9]+$/)||useritem[1].value.match(/^[_]+[A-Za-z]+[0-9]+$/)
||useritem[1].value.match(/^[0-9]+[A-Za-z]+[_]+$/==null)||useritem[1].value.match(/^[0-9]+[_]+[A-Za-z]+$/)||useritem[1].value.match(/^[_]+[0-9]+[A-Za-z]+$/)){
divthree[1].style.backgroundColor="orange";
divthree[2].style.backgroundColor="green";
}
else if(useritem[1].value.match(/^[0-9]+$/)||useritem[1].value.match(/^[_]+$/)||useritem[1].value.match(/^[A-Za-z]+$/)){
divthree[1].style.backgroundColor="#dedede";
divthree[2].style.backgroundColor="#dedede";
}
else{
divthree[1].style.backgroundColor="orange";
divthree[2].style.backgroundColor="#dedede";
}
}
else{
divthree[1].style.backgroundColor="#dedede";
divthree[2].style.backgroundColor="#dedede";
}
}
//失焦事件
for(var i=0;i<useritem.length;i++){
useritem[i].index=i;
useritem[i].onblur=function(){
//console.log(this.id);
user[this.id].call(this);
}
}
//表单提交事件 在所有的框都通过验证并且check被点击了后才可以提交
userform.onsubmit=function(){
if(check.checked){
for(var i=0;i<useritem.length;i++){
useritem[i].focus();
}
sub.focus();
var errlength=document.getElementsByClassName("error").length;
if(errlength){ //非0
return false;
}
return true;
}
else{
return false;
}
}
//眼睛事件
two[0].onclick=function(){
if(useritem[1].type=="password"){
useritem[1].type="text";
this.src="img/eye.png";
}
else{
useritem[1].type="password";
this.src="img/eye1.png";
}
}
two[1].onclick=function(){
if(useritem[1].type=="password"){
useritem[1].type="text";
this.src="img/eye.png";
}
else{
useritem[1].type="password";
this.src="img/eye1.png";
}
}
//点击中国居民身份证下边变换 onchange
select1.onchange=function(){ //option不能有value
//console.log(select1.value); //用当前value必须将原本select中的value=""属性去除
if(this.value=="港澳居民来往内地通行证"||this.value=="台湾居民来往大陆通行证"){
for(var i=0;i<san.length;i++){
san[i].style.display="none";
}
for(var k=0;k<add1.length;k++){
add1[k].style.display="block";
}
}
else if(this.value=="护照"){
china.style.display="block";
console.log(add1[2].className);
for(var i=0;i<san.length;i++){
san[i].style.display="none";
}
for(var k=0;k<add1.length;k++){
add1[k].className="add1 error"
}
add1[0].style.display="none";
}
else if(this.value=="中国居民身份证"){
china.style.display="none";
for(var i=0;i<san.length;i++){
san[i].style.display="block";
}
for(var k=0;k<add1.length;k++){
add1[k].style.display="none";
}
}
}
//san 中国居民按钮点击事件
san[0].onclick,san[2].onclick=function(){
china.style.display="none";
for(var k=0;k<add1.length;k++){
add1[k].style.display="none";
}
}
san[1].onclick=function(){
china.style.display="block";
for(var k=0;k<add1.length;k++){
add1[k].style.display="block";
}
}
//旅客类型
select2.onchange=function(){
if(this.value=="学生"){
console.log(1);
for(var i=0;i<student.length;i++){
student[i].style.display="block";
}
}
else{
for(var i=0;i<student.length;i++){
student[i].style.display="none";
}
}
}
window.onload=function(){
three[0].click();
//男女选择事件
xuanze[0].click();
}
</script>
</body>
</html>