利用正则表达式做验证登录

最新推荐文章于 2023-09-20 20:13:01 发布

荒--

最新推荐文章于 2023-09-20 20:13:01 发布

阅读量4k

点赞数

分类专栏： WEB基础

本文链接：https://blog.csdn.net/wangqing84411433/article/details/70194402

版权

WEB基础专栏收录该内容

30 篇文章 1 订阅

订阅专栏

样式代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>登录</title>
    <meta charset="utf-8"/>
    <style type="text/css">
      form{
        width:500px;
        margin:150px auto;
        border:1px solid #CCC;
      }
      form h1{
        text-align:center;
        margin:0;
        padding:5px;
        border:1px solid #CCC;
      }
      form p{
        margin:0;
        padding:20px;
        border:1px solid #CCC;
      }
      form div{
        text-align:center;
        margin:0;
        padding:10px;
        border:1px solid #CCC;
      }
      .error_msg{
        border:1px solid red;
        color:red;
      }
    </style>
    <script type="text/javascript">
      //校验用户名
      function check_name(){
    	var input = document.getElementById("name");
    	var span = document.getElementById("name_msg");
    	var name = input.value;
    	//正则表达式
    	var reg = /^\w{3,10}$/;
    	if(!reg.test(name)){
    		//如果不匹配增加错误样式
    		//className属性等价于元素的class
    		span.className = "error_msg";
    		return false;
    	}else{
    		//如果匹配,移除错误样式
    		span.className = "";
    		return true;
    	}
      }
      //校验密码
      function check_pwd(){
    	var input = document.getElementById("pwd");
    	var span = document.getElementById("pwd_msg");
    	var pwd = input.value;
    	var reg = /^\w{6,20}$/;
    	if(!reg.test(pwd)){
    		span.className = "error_msg";
    		return false;
    	}else{
    		span.className = "";
    		return true;
    	}
      }
    </script>
  </head>
  <body>
  <!-- 表单用于输入登录信息,提交给服务器 -->
  <!-- onsubmit是表单提交事件,在点击登录时触发,若该方法返回true,
  		则提交表单,返回false则不提交,起到拦截的作用
   -->
  <form action="http://tmooc.cn" οnsubmit="return (check_name()+check_pwd())==2">
    <h1>登录</h1>
      <p>
      	帐号：
      	<input type="text" οnblur="check_name()" id="name"/>
      	<span id="name_msg">3-10个字母、数字、下划线</span>
      </p>
      <p>
      	密码：
      	<input type="password" οnblur="check_pwd()" id="pwd"/>
      	<span id="pwd_msg">6-20个字母、数字、下划线</span>
      </p>
     <div>
       <input type="submit" value="登录" οnclick="f1()"/>
     </div>
  </form>
  </body>
</html