纯js表单提交模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style type="text/css">
span{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<script type="text/javascript">
/*
（1）⽤户名不能为空
（2）⽤户名必须在6-14位之间
（3）⽤户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码⼀致，邮箱地址合法。
（5）统⼀失去焦点验证
（6）错误提⽰信息统⼀在span标签中提⽰，并且要求字体12号，红⾊。
（7）⽂本框再次获得焦点后，清空错误提⽰信息，如果⽂本框中数据不合法要求清空⽂本框的value （8）最终表单中所有项均合法⽅可提交
*/
// 获取username的span标签
var usernameErrorSpan = ElementById("usernameError");
// 给⽤户名⽂本框绑定blur事件
var usernameElt = ElementById("username");
// 获取⽤户名
var username = usernameElt.value;
// 去除前后空⽩
username = im();
// 判断⽤户名是否为空
/*
if(username){
// 代表username不是空字符串
alert("username = " + username);
}else{
// 代表username是空字符串
alert("username是空字符串");
}
*/
/
/ if(username.length == 0){}
if(username ===""){
// ⽤户名为空
usernameErrorSpan.innerText ="⽤户名不能为空";
}else{
// ⽤户名不为空
// 继续判断长度[6-14]
if(username.length <6|| username.length >14){
// ⽤户名长度⾮法
usernameErrorSpan.innerText ="⽤户名长度必须在[6-14]之间";
}else{
/
/ ⽤户名长度合法
// 继续判断是否含有特殊符号
var regExp =/^[A-Za-z0-9]+$/;
var ok = st(username);
if(ok){
// ⽤户名最终合法
}else{
// ⽤户名中含有特殊符号
usernameErrorSpan.innerText ="⽤户名只能由数字和字母组成";
}
}
}
}
// 给username这个⽂本框绑定获得焦点事件
// 清空⾮法的value
if(usernameErrorSpan.innerText !=""){
usernameElt.value ="";
usernameElt.value ="";
}
// 清空span
usernameErrorSpan.innerText ="";
}
// 获取密码错误提⽰的span标签
var pwdErrorSpan = ElementById("pwdError");
// 获取确认密码框对象
var userpwd2Elt = ElementById("userpwd2");
// 绑定blur事件js正则表达式判断数字
// 获取密码和确认密码
var userpwdElt = ElementById("userpwd");
var userpwd = userpwdElt.value;
var userpwd2 = userpwd2Elt.value;
if(userpwd != userpwd2){
// 密码不⼀致
pwdErrorSpan.innerText ="密码不⼀致";
}else{
// 密码⼀致
}
}
// 绑定focus事件
if(pwdErrorSpan.innerText !=""){
userpwd2Elt.value ="";
}
pwdErrorSpan.innerText ="";
}
// 获取email的span
var emailSpan = ElementById("emailError");
// 给email绑定blur事件
var emailElt = ElementById("email");
// 获取email
var email = emailElt.value;
// 编写email的正则
var emailRegExp =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = st(email);
if(ok){
// 合法
}else{
// 不合法
emailSpan.innerText ="邮箱地址不合法";
}
}
// 给emailElt绑定focus
if(emailSpan.innerText !=""){
emailElt.value ="";
}
emailSpan.innerText ="";
}
// 给提交按钮绑定⿏标单击事件
var submitBtnElt = ElementById("submitBtn");
// 触发username的blur userpwd2的blur email的blur
// 不需要⼈⼯操作，使⽤纯JS代码触发事件.
usernameElt.focus();
usernameElt.blur();
userpwd2Elt.focus();
userpwd2Elt.blur();
emailElt.focus();
emailElt.blur();
// 当所有表单项都是合法的时候，提交表单
if(usernameErrorSpan.innerText ==""&& pwdErrorSpan.innerText ==""&& emailSpan.innerText ==""){ // 获取表单对象
var userFormElt = ElementById("userForm");
// 可以在这⾥设置action，也可以不在这⾥.
userFormElt.action ="localhost:8080/jd/save";
// 提交表单
userFormElt.submit();
}
}
}
}
</script>
<!--这个表单提交应该使⽤post，这⾥为了检测，所以使⽤get。-->
<!-- <form id="userForm" action="localhost:8080/jd/save" method="get"> -->
<form id="userForm"method="get">
⽤户名<input type="text"name="username"id="username"/><span id="usernameError"></span><br>密码<input type="text"name="userpwd"id="userpwd"/><br>
确认密码<input type="text"id="userpwd2"/><span id="pwdError"></span><br>
邮箱<input type="text"name="email"id="email"/><span id="emailError"></span><br>
<!-- <input type="submit" value="注册" /> -->
<input type="button"value="注册"id="submitBtn"/>
<input type="reset"value="重置"/>
</form>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。