js学习正则表达式

最新推荐文章于 2024-08-06 11:38:24 发布

520ysl

最新推荐文章于 2024-08-06 11:38:24 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/y_yJava/article/details/81879325

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   form div{

       margin-left: 10px;
       float: left;
       width: 400px;
       height: 20px;
   }
   .error_prompt{
   border:solid 1px #ff3300;
   background-color:#fff2e5;
   background-image: url(error1.jpg);
   color: red;
   background-repeat:no-repeat;
   background-position:5px 2px;
   padding:2px 5px 0px 25px;
}
.ok_prompt{
   border:solid 1px #01be00;
   background-color:#e6fee4;
   background-image:url(ok1.jpg);
   background-repeat:no-repeat;
   background-position:5px 2px;
   padding:2px 5px 0px 25px;
   color: green;
}
.msg_prompt{
   border:solid 1px #ffcd00;
   background-color:#ffffda;
   padding-left:5px;
   padding-right:5px;
}

   </style>
   <script type="text/javascript">
       function userInput(){
           var span = document.getElementById('userSpan');
           span.className = "msg_prompt";//修改标签的类为msg_prompt，提示消息的类
           //会自动加载msg_prompt类的样式
           span.innerHTML = "请输入6~12位的用户名，包含英文和数字."
           //innerHTML就是标签内部的文本<span> XXXX </span>
       }
       function checkUser(){
           var user = document.getElementById('user');
           var span = document.getElementById('userSpan');//获取提示框标签
           if(user.value.length < 6 || user.value.length > 12){
               span.className = "error_prompt";
               span.innerHTML = "输入用户名不是6~12位";
               return;
           }
           //是否字符串是英文和数字
           var reg = /^[A-Za-z0-9]+$/;// /正则表达式/
           if(reg.test(user.value) == false){//test(变量字符串)
               span.className = "error_prompt";
               span.innerHTML = "输入用户名必须是英文和数字";
               return;
           }

span.className = "ok_prompt";
span.innerHTML = "用户名合法";

       }
   </script>
</head>
<body>
   <form action="后台首页.html">
       <br>
       <br>
       用&emsp;&emsp;户：<input type="text" name="" id="user" οnfοcus="userInput()" οnblur="checkUser()" >
       &emsp;<span id="userSpan"></span>
       <br><br>
       密&emsp;&emsp;码：<input type="password" name="" id="" >&emsp;<span></span>
       <br><br>
       确认密码：<input type="password" name="" id="" >&emsp;<span ></span>
       <br><br>
       手&emsp;&emsp;机：<input type="text" name="" id="" >&emsp;<span></span>
       <br><br>
       &emsp;&emsp;&emsp;&emsp;<input type="submit" value="注册">
       &emsp;&emsp;&emsp;&emsp;<input type="reset" value="取消">
   </form>
</body>
</html>