js表单验证注册
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
js表单验证是js里面较为基础的操作。
代码实现部分
代码如下：
<!DOCTYPE html>
<html ><head><meta charset="utf-8"><title>表单验证</title><style type="text/css">span{color:red;font-size:12px;}</style></head><body background="1.jpg"><script type="text/javascript">window.onload=function(){var height=document.body.scrollHeight;var logo_wrap=document.getElementById("userForm");var margin_top=(height-5)/2; //因为此div在页面中只用了一次且以后不会改变，所以写了数值，如果是不确定的，获取到高度放着这里就可以logo_wrap.style.marginTop=margin_top+"px";//用户名设定//获取username的span标签var usernameErrorSpan=document.getElementById("usernameError");//给用户名文本框绑定blur事件var usernameElt=document.getElementById("username");//失去焦点事件usernameElt.onblur = function(){var username = usernameElt.value;//去除空白username=username.trim();if(username===""){usernameErrorSpan.innerText="用户名不能为空";}else{if(username.length<6||username.length>14){//用户名长度非法usernameErrorSpan.innerText="用户名长度必须在6-14中间"}else{//用户长度合法//判断是否有特殊符号（正则表达式判断）var regExp=/^[A-Za-z0-9]+$/;var ok=regExp.test(username);if(ok){//用户名合法}else{usernameErrorSpan.innerText="用户名必须为数字或者字母"}}}}usernameElt.onfocus = function(){ //清空非法valueif(usernameErrorSpan.innerText !=""){usernameElt.value = "";}else{}usernameErrorSpan.innerText ="";}//密码设定//获取密码框对象var userpwdElt=document.getElementById("userpwd");//获取密码文本框后面报错var userpwdErrorSpan=document.getElementById("pwdError");//绑定blur事件userpwdElt.onblur=function(){//获取密码var userpwd=userpwdElt.value;//去除空白userpwd=userpwd.trim();if(userpwd===""){userpwdErrorSpan.innerText="密码不能为空";}else{if(userpwd.length<8||userpwd.length>14){//密码长度非法userpwdErrorSpan.innerText="密码长度必须在8-14中间"}else{}}}userpwdElt.onfocus = function(){//清空非法valueif(userpwdErrorSpan.innerText !=""){userpwdElt.value = "";}else{}userpwdErrorSpan.innerText ="";}//确认密码//获取确认密码框对象var userpwd2Elt=document.getElementById("userpwd2");//确认密码文本框后面报错var userpwd2ErrorSpan=document.getElementById("pwd2Error");//绑定blur事件userpwd2Elt.onblur=function(){//获取密码和确认密码var userpwd2=userpwd2Elt.value;var userpwd=userpwdElt.value;if(userpwd!=userpwd2){userpwd2ErrorSpan.innerText="密码不一致";}else{//密码确认一致userpwd2ErrorSpan.innerText="";}}userpwd2Elt.onfocus = function(){//清空非法valueif(userpwd2ErrorSpan.innerText !=""){userpwd2Elt.value = "";}else{}userpwd2ErrorSpan.innerText ="";}//邮箱验证//获取email的span标签var emailErrorSpan=document.getElementById("emailError");//给用户名文本框绑定blur事件var emailElt=document.getElementById("email");//失去焦点事件emailElt.onblur = function(){var email = emailElt.value;//去除空白email=email.trim();if(email===""){emailErrorSpan.innerText="邮箱不能为空";}else{//判断是否有特殊符号（正则表达式判断）var regExp2=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;var ok=regExp2.test(email);if(ok){//邮箱合法}else{emailErrorSpan.innerText="邮箱格式不正确"}}}emailElt.onfocus = function(){ //清空非法valueif(emailErrorSpan.innerText !=""){emailElt.value = "";}else{}emailErrorSpan.innerText ="";}//给提交按钮绑定鼠标单击事件var submitBtnElt = document.getElementById("submitBtn");submitBtn.onclick=function(){//触发username的blur userpwd2的blur email的blurusernameElt.focus();usernameElt.blur();userpwdElt.focus();userpwdElt.blur();emailElt.focus();emailElt.blur();if(usernameErrorSpan=="" && userpwd2ErrorSpan=="" && userpwdErrorSpan=="" && emailErrorSpan==""){//获取表单对象var userFormElt = document.getElementById("userForm");//提交表单userFormElt.submit();}}}</script><!--action="http://localhost:8080/js%20program/表单验证.html"--><form id="userForm" action="http://localhost:8080/js program/表单验证" method="get"><div style="text-align:center;vertical-align:middel;"><font color="black" size="6">XXXX宿舍水电管理系统注册</font><br><br><br><br>用户名<input type="text" name="username" id="username" /><span id="usernameError"></span><br><br>密码<input type="text" name="userpwd" id="userpwd"/><span id="pwdError"></span><br><br>确认密码<input type="text" id="userpwd2" /><span id="pwd2Error"></span><br><br>邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br><br><input type="submit" value="注册" id="submitBtn" /><input type="reset" value="重置" /></div></form></body>
</html>该处使用的url网络请求的数据。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！