JS 的表单提交
涉及到的都是前端的知识:HTML、CSS、JavaScript 等
项目需求:
- 用户名不能为空;
- 用户名必须在6-14位之间;
- 用户名只能有数字和字母组成,不能含有其它符号(正则表达式);
- 密码和确认密码一致,邮箱地址合法;
- 统一失去焦点验证;
- 错误提示信息统一在span标签中提示,并且要求字体12号,红色;
- 文本框再次获得焦点后,清空错误提示信息,如果文本框中数据不合法要求清空文本框的value;
- 最终表单中所有项均合法方可提交
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<!-- 设置 span 样式 -->
<style type="text/css">
span{
font-size: 12px;
color: red;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
// 获取用户名 span 对象
var usernameSpan = document.getElementById("usernameError");
// 给用户名文本框绑定 blur 事件
document.getElementById("username").onblur=function(){
// 获取用户名对象
var username = document.getElementById("username").value;
// 去除前后空白
username = username.trim();
// if(username.length == 0)
// if(username === "")
if(username){ // 程序到这代表username不是空字符串
if(username.length >= 6 && username.length <= 14){ // 继续判断长度 6-14 个长度
// 继续判断用户名是否包含特殊字符
var regExp = /^[A-Za-z0-9]+$/;
var flag = regExp.test(username);
if(flag){
// 用户名最终合法,什么也不做
}else{
usernameSpan.innerText = "用户名只能由数字、字母组成,不能含有其他符号!"
}
}else{
usernameSpan.innerText = "用户名长度必须在 6 - 14 之间!"
}
}else{
usernameSpan.innerText = "用户名不能为空!"
}
}
// 给用户名文本框绑定 focus 事件
document.getElementById("username").onfocus = function(){
// 清空非法的username
if(usernameSpan.innerText != ""){
document.getElementById("username").value = "";
}
// 清空span
usernameSpan.innerText = "";
}
// 获取确认密码的 span 标签
var passwordErrorSpan = document.getElementById("repasswordError")
// 获取确认密码框对象
var queRenMiMa = document.getElementById("repwd");
// 获取密码框对象
var miMa = document.getElementById("pwd");
// 确认密码绑定 blur 事件
queRenMiMa.onblur = function(){
if(queRenMiMa.value != miMa.value){
passwordErrorSpan.innerText = "密码不一致,请重新输入!"
}
}
// 确认密码绑定 focus 事件
document.getElementById("repwd").onfocus = function(){
// 清空不一致的密码和确认密码
if(passwordErrorSpan.innerText != ""){
// 清空 span
passwordErrorSpan.innerText = "";
// 清空密码
miMa.value = "";
// 清空确认密码
queRenMiMa.value = "";
}
}
/* 检查邮箱是否合法 */
// 获取邮箱文本框对象
var emailObject = document.getElementById("email");
// 创建邮箱正则表达式
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
// 获取邮箱span对象
var emailSpan = document.getElementById("emialError");
// 邮箱文本框绑定 blur 事件
emailObject.onblur = function(){
var emailFlag = emailRegExp.test(emailObject.value);
if(!emailFlag){
emailSpan.innerText = "邮箱不合法!";
}
}
// 邮箱文本框绑定 focus 事件
document.getElementById("email").onfocus = function(){
// 清空不合法的邮箱
if(emailSpan.innerText != ""){
// 清空邮箱
emailObject.value = "";
}
// 清空 span
emailSpan.innerText = "";
}
// 获取表单对象
var submitBtnElt = document.getElementById("submitButton");
// 给提交按钮绑定click事件
submitBtnElt.onclick = function(){
// 当所有表单项都合法时,提交表单
/*
触发所有表单对象的 blur 事件,如果都合法则最终合法
不需要手动触发事件,让程序(JS代码)触发事件
*/
document.getElementById("username").focus();
document.getElementById("username").blur();
/* document.getElementById("pwd").focus();
document.getElementById("pwd").blur(); */
document.getElementById("repwd").focus();
document.getElementById("repwd").blur();
document.getElementById("email").focus();
document.getElementById("email").blur();
var formElt = document.getElementById("myform");
// 提交表单方法
// 也可以在这里设置action属性
if(usernameSpan.innerText == "" && passwordErrorSpan.innerText == ""
&& emailSpan.innerText == ""){
formElt.submit();
}
}
}
</script>
<!-- 表单 (提交应该使用 post 方式,而不是 get)-->
<form action="localhost:8080/oa/save" method="get" id="myform">
<table align="left">
<tr align="center">
<td>用户名</td>
<td>
<input type="text" name="username" id="username" />
<span id="usernameError"></span>
</td>
</tr>
<tr align="center">
<td>密码</td>
<td>
<!-- 这里为了测试写成 text,正常写成 password -->
<input type="text" name="password" id="pwd" />
<span id="passwordError"></span>
</td>
</tr>
<tr align="center">
<td>确认密码</td>
<td>
<input type="text" id="repwd" />
<span id="repasswordError"></span>
</td>
</tr>
<tr align="center">
<td>邮箱</td>
<td>
<input type="text" name="email" id="email" />
<span id="emialError"></span>
</td>
</tr>
</table>
<br><br><br><br><br><br>
<!-- <input type="submit" value="注册" /> -->
<input type="button" value="注册" id="submitButton"/>
<input type="reset" value="重置" />
</form>
</body>
</html>
结果:
表单项不合法情况示例:
表单项全部合法可提交示例: