（一）初版：事件(onsubmit）
步骤分析：
第一步：确定事件(onsubmit)并为其绑定一个函数
第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
第三步：对用户输入的数据进行判断
第四步：数据合法(让表单提交)
第五步：数据非法(给出错误提示信息，不让表单提交)
问题：如何控制表单提交？
关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个
返回值。 onsubmit = return checkForm()
*注意点：
- onsubmit不是加在注册按钮那里，加在表单的<form>标签内；
- onsubmit="return 函数名（）"
- 获取元素时，要在相应的<input/>标签内写上id，一定要一样！
- if (uValue == "") //判断为空
- return false; //不会提交表单
- if (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)) //匹配正则表达式
代码实现
JS部分：
1 <script> 2 function checkForm() { 3 //alert("aa"); 4 /**校验用户名**/ 5 //1.获取用户输入的数据 6 var uValue = document.getElementById("user").value; 7 //alert(uValue); 8 if (uValue == "") { //为空 9 //2.给出错误提示信息 10 alert("用户名不能为空！"); 11 return false; //不会提交表单 12 } 13 /*校验密码*/ 14 var pValue = document.getElementById("password").value; 15 if (pValue == "") { 16 alert("密码不能为空！"); 17 return false; 18 } 19 /**确认密码*/ 20 var rpValue = document.getElementById("repassword").value; 21 if (rpValue != pValue) { 22 alert("两次密码输入不一致！"); 23 return false; 24 } 25 /**校验邮箱*/ 26 var eValue = document.getElementById("email").value; 27 if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)) { //不匹配正则表达式 28 alert("邮箱格式不正确！"); 29 return false; 30 } 31 } 32 </script>
Html 部分：（需要在指定位置添加 id）
<form aciton="#" method="get" name="regForm" onsubmit="return checkForm()">
结果：
（二）优化版：事件(onfocus&onblur）
步骤分析：
第一步：确定事件(onfocus 聚焦事件)并为其绑定一个函数
第二步：书写绑定函数(在输入框的后面给出提示信息)
第三步：确定事件(onblur 离焦事件)并为其绑定一个函数
第四步：书写函数(对数据进行校验，分别给出提示)
* 注意点：
- 双引号内只用单引号
onfocus="showTips('user','用户名必填！')"
- alert() 弹警告窗口； .innerHTML 写在页面内部
- 比较时用==
uValue == ""
代码：
/**因为多处需要用到相同代码，所以用函数传参*/
html部分：
<input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')" /><span id="userspan"></span>
<input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
Js部分：
<script>
/**改进，传参*/
function showTips(id, info) {
document.getElementById(id + "span").innerHTML = "<font color='gray'>" + info + "</font>";
}
function check(id, info) {
//1.获取用户输入的用户名数据
var uValue = document.getElementById(id).value;
//2.进行校验
if (uValue == "") {
document.getElementById(id + "span").innerHTML = "<font color='red'>" + info + " </font>";
} else {
document.getElementById(id + "span").innerHTML = "";
}
}
</script>
结果：