第一阶段：前端开发_使用JS完成注册页面表单校验

2018-06-04

使用JS完成注册页面表单校验

一、步骤实现

　　第一步：确定事件(onsubmit)并为其绑定一个函数

　　第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)

　　第三步：对用户输入的数据进行判断

　　第四步：数据合法(让表单提交)

　　第五步：数据非法(给出错误提示信息，不让表单提交) 

问题：如何控制表单提交？ 

关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个 返回值。 如：onsubmit = return checkForm()

二、代码实现

　　JS代码：

<script>  
　　function checkForm(){  
　　 　//alert("aa");   /**校验用户名*/ 
 　 　//1.获取用户输入的数据 
 　　 var uValue = document.getElementById("user").value;  
　　 //alert(uValue);   if(uValue==""){    //2.给出错误提示信息 
   　　alert("用户名不能为空!"); 
 　　 return false;
}      
　　　/*校验密码*/ 
  　　var pValue = document.getElementById("password").value; 
　　  if(pValue==""){   
　　　　 alert("密码不能为空!"); 
  　　　 return false;   }      /**校验确认密码*/ 
 　　 var rpValue = document.getElementById("repassword").value;
  　　if(rpValue!=pValue){  
　　　　 alert("两次密码输入不一致!"); 
  　　　 return false;   }      /*校验邮箱*/ 
 　　 var eValue = document.getElementById("eamil").value;
　　   if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z09_-])+/.test(eValue)){
　　　　    alert("邮箱格式不正确!"); 
   　　　　 return false;  
　　 }  
  }
</script>

Html 部分：

<form action="#" method="get" name="regForm" onsubmit="return checkForm()">

　　需要在指定位置添加 id