JavaScript33-40：表单验证

于 2021-05-31 23:27:47 发布
阅读量181 收藏 1
点赞数
分类专栏： 锦到说JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43568982/article/details/115748791
版权

开始时间：20210419

正则表达式

正则表达式这个熟悉啊，在之前的Python和VBA中都学过

语法手册

测试工具

创建正则表达式对象

第一种创建方式:
var regExp =/正则表达式/flags;
第二种创建方式:使用内置支持类RegExp
var regExp = new RegExp(“正则表达式”, “flags” );

关于flags:
g:全局匹配i，忽略大小写
m:多行搜索（Es规范制定之后才支持m。)
当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以使用。

实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
</head>

<body>
<script>
	window.onload=function(){
		//给按钮绑定
		document.getElementById('btn').onclick=function(){
			var email=document.getElementById("email").value;
			//输入正则表达式
			var emailRegExp=/^\w+([-+. ]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			//测试正则表达式
			var ok=emailRegExp.test(email);
			if(!ok){
				document.getElementById("emailError").innerText="邮箱地址不合法";
			}else{
				document.getElementById("emailError").innerText="邮箱地址合法";
			}

		}
		
		//给按钮获得焦点，在email框框中点了那么一下，则让emailError显示空串
		document.getElementById("email").onfocus=function(){
			document.getElementById("emailError").innerText="";
		}
		
	}
	
	</script>
<input type="text" id="email"/>
	<!--设置报错的格式-->
<span id="emailError" style="color: red;font-size: 12px;"></span>
<input type="button" value="验证邮箱" id="btn"/>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

Trim函数

其实在VBA中我们就学过这个函数了

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript">
//低版本的IE浏览器不支持字符串的trim()函数,怎么办?
//可以自己对string类扩展一个全新的trim()函数!
//这里不存在重载，直接是覆盖
String.prototype.trim= function(){
//alert("扩展之后的trim方法");
    //去除违前字符串的前后空白
//在当前的方法中的this代表的就是当前字符串.
    //先去除前半空白，再去除后半空白
return this.replace(/^\s+/,"").replace(/\s+$/,"");
}


window.onload = function(){
document.getElementById("btn").onclick = function(){
//获取用户名
var username = document.getElementById("username").value;//去除前后空白
username = username.trim() ;//测试
alert("--->" + username + "<----");
}
}
</script>
<input type="text" id="username"/>
<input type="button" value="获取用户名" id="btn"/>
</body>
</html>

验证表单

判断用户名是否为空

    window.onload=function(){
        //给用户名文本框绑定blur事件
        var usernameElt=document.getElementById("username");
        //失去焦点
        usernameElt.onblur=function(){
            //获取用户名
           
            var username=usernameElt.value;
            username=username.trim();
            //判断用户名是否为空
            
            
            //因为之前去掉空白了，所以还是判断长度比较靠谱 
            var usernameErrorSpan=document.getElementById("usernameError");
            if(username.length===0){
                //报错需要用到span，所以我们要在这上面获取span对象
                usernameErrorSpan.innerText="用户名不能为空"
            }
            
        }
        
    }

在这里插入图片描述
进一步想，需要触发一个focus事件
就是当我的鼠标点回用户名时，如果之前的值有问题
可以清空里面的value，或者是将空格清空
如果之前输入合法，那么就保持他即可

那么怎么判断呢，就看后面红字提示是否为空，不为空则是出错的结果，需要清空

这个过程我们又需要获取usernameErrorSpan
所以把他提出函数体之外

 window.onload=function(){
        var usernameErrorSpan=document.getElementById("usernameError");
        
        //给用户名文本框绑定blur事件
        var usernameElt=document.getElementById("username");
        //失去焦点
        usernameElt.onblur=function(){
            //获取用户名
           
            var username=usernameElt.value;
            username=username.trim();
            //判断用户名是否为空
            
            
            //因为之前去掉空白了，所以还是判断长度比较靠谱 
            
            if(username.length===0){
                //报错需要用到span，所以我们要在这上面获取span对象
                usernameErrorSpan.innerText="用户名不能为空";
            }
            
        }
        
        //给username文本框绑定焦点事件
        //即点击文本框时，光标能出现在左侧，便于输入
        usernameElt.onfocus=function(){
            //清空span
            if(usernameErrorSpan.innerText!=""){
                usernameElt.value="";
            }
            usernameErrorSpan.innerText="";
            //清空非法的value，不合法就清空
        }
    }

判断用户名是否合法，添加了判断长度，判断非法字符

var username=usernameElt.value;
            username=username.trim();
            //判断用户名是否为空
            
            
            //因为之前去掉空白了，所以还是判断长度比较靠谱 
            
            if(username.length===0){
                //报错需要用到span，所以我们要在这上面获取span对象
                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="用户名长度必须是数字和字母";
                }
            }

同理，写判断 确认密码

 //获取密码错误提示
        var pwdErrorSpan=document.getElementById("pwdError");
        //获取确认密码框对象
        var userpwd2Elt=document.getElementById("userpwd2");
        
        userpwd2Elt.onblur=function(){
            //获取密码
            var userpwdElt=document.getElementById("userpwd");
            var userpwd=userpwdElt.value;
            var userpwd2=userpwd2Elt.value;
            if(userpwd!=userpwd2){
                pwdErrorSpan.innerText="密码不一致";
             
            }
            else{
                pwdFlag=true;
            }
          
        }
      
        userpwd2Elt.onfocus=function(){
            if(pwdErrorSpan.innerText!=""){
              
            }
        pwdErrorSpan.innerText="";
        
        }

给email也做一个判断

 //给email绑定blur事件
        var emailElt=document.getElementById("email");
        //获取email的span
        var emailSpan=document.getElementById("emailError");
        emailElt.onblur=function(){
            //获取email
            var email=emailElt.value;
            //编写email的正则
            var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([--]\w+)*$/
            var ok=emailRegExp.test(email);
            if(ok){
                emailFlag=true;
            }else{
               
                //邮箱格式不正确
                   emailSpan.innerText="邮箱格式不正确";
                }
            
        }
        
        //绑定focus事件
        emailElt.onfocus=function(){
            if(emailSpan.innerText!=""){
                emailElt.value="";
            }
                emailSpan.innerText="";
        
        }

然后我们进一步要想

如果需要提交，必须等到所有判断都没问题才能提交
因此我们最好把提交本身按钮设置为一个button
等判断都没问题后，再直接用js实现submit

但我们判断时，还要添加一个focus 和blur触发事件，因为如果你没有触发，spanError肯定也不会报错

所以一定要先触发，再判断

 //给提交按钮绑定鼠标单击事件
       var submitElt=document.getElementById("submitBtn");
        //当所有表单验证通过，方可提交
        submitElt.onclick=function(){
            //需要先判断是否所有的Span都为空，且所有的blur都被触发过（不然刚开始初始化时Span也为空，但那个时候不能提交）
             
            //用代码实现触发事件 username userpwd2 email 的blur
            usernameElt.focus();
            usernameElt.blur();
            
            userpwd2Elt.focus();
            userpwd2Elt.blur();
            
            emailElt.focus();
            emailElt.blur();
            
            //判断上面三个的Span是否为空，为空则可以提交
            
            if(usernameFlag && pwdFlag && emailFlag){
               var userFormElt=document.getElementById("userForm");
                userFormElt.submit();
               }
                  }

这样写完，大体的判断就可以做了

<!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">
    window.onload=function(){
        var usernameErrorSpan=document.getElementById("usernameError");
        
        var usernameFlag=false;
        
        var pwdFlag=false;
        var emailFlag=false;
        
        
        //给用户名文本框绑定blur事件
        var usernameElt=document.getElementById("username");
        //失去焦点
        usernameElt.onblur=function(){
            //获取用户名
            
            var username=usernameElt.value;
            username=username.trim();
            //判断用户名是否为空
            
            
            //因为之前去掉空白了，所以还是判断长度比较靠谱 
            
            if(username.length===0){
                //报错需要用到span，所以我们要在这上面获取span对象
                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){
                    //用户名合法
                    usernameFlag=true;
                }
                else{
                    //用户名含有特殊符号
                     usernameErrorSpan.innerText="用户名长度必须是数字和字母";
                }
            }
    
        }
        
        //给username文本框绑定焦点事件
        //即点击文本框时，光标能出现在左侧，便于输入
        usernameElt.onfocus=function(){
            //清空span
            if(usernameErrorSpan.innerText!=""){
                usernameElt.value="";
            }
            usernameErrorSpan.innerText="";
            //清空非法的value，不合法就清空
        }
        
        
        //获取密码错误提示
        var pwdErrorSpan=document.getElementById("pwdError");
        //获取确认密码框对象
        var userpwd2Elt=document.getElementById("userpwd2");
        
        userpwd2Elt.onblur=function(){
            //获取密码
            var userpwdElt=document.getElementById("userpwd");
            var userpwd=userpwdElt.value;
            var userpwd2=userpwd2Elt.value;
            if(userpwd!=userpwd2){
                pwdErrorSpan.innerText="密码不一致";
             
            }
            else{
                pwdFlag=true;
            }
          
        }
           
        userpwd2Elt.onfocus=function(){
            if(pwdErrorSpan.innerText!=""){
                userpwd2Elt.value="";
            }
        pwdErrorSpan.innerText="";
        
        }
        
        
        //给email绑定blur事件
        var emailElt=document.getElementById("email");
        //获取email的span
        var emailSpan=document.getElementById("emailError");
        emailElt.onblur=function(){
            //获取email
            var email=emailElt.value;
            //编写email的正则
            var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([--]\w+)*$/
            var ok=emailRegExp.test(email);
            if(ok){
                emailFlag=true;
            }else{
               
                //邮箱格式不正确
                   emailSpan.innerText="邮箱格式不正确";
                }
            
        }
        
        //绑定focus事件
        emailElt.onfocus=function(){
            if(emailSpan.innerText!=""){
                emailElt.value="";
            }
                emailSpan.innerText="";
        
        }
        
        //给提交按钮绑定鼠标单击事件
       var submitElt=document.getElementById("submitBtn");
        //当所有表单验证通过，方可提交
        submitElt.onclick=function(){
            //需要先判断是否所有的Span都为空，且所有的blur都被触发过（不然刚开始初始化时Span也为空，但那个时候不能提交）
             
            //用代码实现触发事件 username userpwd2 email 的blur
            usernameElt.focus();
            usernameElt.blur();
            
            userpwd2Elt.focus();
            userpwd2Elt.blur();
            
            
            emailElt.focus();
            emailElt.blur();
            
            //判断上面三个的Span是否为空，为空则可以提交
            
            if(usernameFlag && pwdFlag && emailFlag){
               var userFormElt=document.getElementById("userForm");
                userFormElt.submit();
               }
               
        }
        
    }    
    
    </script>
    
    <!--表单提交用post，这为了演示传过去的参数是否正确，用的是get-->
    <form id="userForm" action="http://localhost:8080/jd/save" 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="button" value="注册" id="submitBtn"/>
        <input type="reset" value="重置" />
        
    </form>
   
</body>
</html>

结束时间：20210531

高开低走。
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值