这里是简单的前端校验，后边还会介绍后台的校验。
多重校验保证获取安全数据
步骤：
1.确定事件onsubmit，并绑定函数
2.编写函数，作用是获取输入数据
3.判断数据是否合法，合法则提交，否则表单不提交
HTML代码：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???</head> ???<body> ???????<table> ???????????<!--3.注册表单--> ???????????<tr> ???????????????<!--嵌套一个十行二列的表格--> ???????????????<form action="#" method="get" name="regForm" onsubmit="return checkForm()"> ???????????????????<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> ???????????????????????<tr height="40px"> ???????????????????????????<td colspan="2"> ???????????????????????????????<font size="4">会员注册</font> USER REGISTER ???????????????????????????</td> ???????????????????????</tr> ???????????????????????<tr> ???????????????????????????<td> ???????????????????????????????用户名 ???????????????????????????</td> ???????????????????????????<td> ???????????????????????????????<input type="text" name="user" size="34px" id="user" /> ???????????????????????????</td> ???????????????????????</tr> ???????????????????????<tr> ???????????????????????????<td> ???????????????????????????????密码 ???????????????????????????</td> ???????????????????????????<td> ???????????????????????????????<input type="password" name="password" size="34px" id="password" /> ???????????????????????????</td> ???????????????????????</tr> ???????????????????????<tr> ???????????????????????????<td> ???????????????????????????????确认密码 ???????????????????????????</td> ???????????????????????????<td> ???????????????????????????????<input type="password" name="repassword" size="34px" id="repassword"></input> ???????????????????????????</td> ???????????????????????</tr> ???????????????????????<tr> ???????????????????????????<td> ???????????????????????????????Emaile ???????????????????????????</td> ???????????????????????????<td> ???????????????????????????????<input type="text" name="email" size="34px" id="eamil" /> ???????????????????????????</td> ???????????????????????</tr> ???????????????????????<tr> ???????????????????????????<td> ???????????????????????????????姓名 ???????????????????????????</td> ???????????????????????????<td> ???????????????????????????????<input type="text" name="username" size="34px" /> ???????????????????????????</td> ???????????????????????</tr> ???????????????????????<tr> ???????????????????????????<td> ???????????????????????????????性别 ???????????????????????????</td> ???????????????????????????<td> ???????????????????????????????<input type="radio" name="sex" value="男" />男 ???????????????????????????????<input type="radio" name="sex" value="女" />女 ???????????????????????????</td> ???????????????????????</tr> ???????????????????????<tr> ???????????????????????????<td> ???????????????????????????????出生日期 ???????????????????????????</td> ???????????????????????????<td> ???????????????????????????????<input type="text" name="birthday" size="34px" /> ???????????????????????????</td> ???????????????????????</tr> ???????????????????????<tr> ???????????????????????????<td> ???????????????????????????????验证码 ???????????????????????????</td> ???????????????????????????<td> ???????????????????????????????<input type="text" name="yzm" /> ???????????????????????????</td> ???????????????????????</tr> ???????????????????????<tr> ???????????????????????????<td colspan="2"> ???????????????????????????????<input type="submit" value="注册" /> ???????????????????????????</td> ???????????????????????</tr> ???????????????????</table> ???????????????</form> ???????????????</td> ???????????</tr> ???????</table> ???</body></html>
效果：
JS代码：
<script> ???????????function checkForm() { ???????????????/**校验用户名*/ ???????????????//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-Z0-9_-])+/.test(eValue)) { ???????????????????alert("邮箱格式不正确!"); ???????????????????return false; ???????????????} ???????????} ???????</script>JS应用实例1：使用JS完成注册页面表单校验
原文地址：https://www.cnblogs.com/xuyiqing/p/8372726.html