正则表达式

最新推荐文章于 2024-05-20 22:56:38 发布

Formattor

最新推荐文章于 2024-05-20 22:56:38 发布

阅读量113

点赞数

文章标签：正则表达式

本文链接：https://blog.csdn.net/Formattor/article/details/116015033

版权

Regular Expression

对象

作用

匹配
替换
提取

定义

var reg=new RegExp(/123/)
var reg2=/124/
// 测试
console.log(reg2.test(124));

字符	解释
^	开始
$	结尾
[]	字符集，任何一个都行,加上边界符就表示仅一个
-	范围
[^]	取反
*	0-∞
+	>1
?	0-1
{3}	重复3次
{3,}	≥3
{3,16}	3-16
()	其中所有都要有
\d	数字
\w	字母数字下划线
\s	空格
大写	^取反
\|	或

可以输入大小写数字以及下划线和短杠
var reg1=/^[a-zA-Z0-9_-]$/
var reg2=/^[^a-zA-Z0-9_-]$/

用户名表单认证

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .wrong{
      color: tomato;
    }
    .right{
      color: teal;
    }
  </style>
</head>
<body>
  <span>请输入用户名</span><input type="text" class="uname">
<script>
  var reg=/^[a-zA-Z0-9]{4,6}$/
  var uname=document.querySelector('.uname')
  var span=document.querySelector('span')
  console.log(uname);
  uname.onblur=function(){
    if(!reg.test(this.value)){
      console.log('错误');
      span.className='wrong'
      span.innerHTML='用户名输入错误'
    }else{
      console.log('成功');
      span.className='right'
      span.innerHTML='用户名输入正确'
    }
  }
</script>  
</body>
</html>

表单验证全部代码

window.onload=function() {
  var reg1=/^1[3|4|5|7|8]\d{9}$/
  var reg2=/^[^0]\d{4,}$/
  var reg3=/^[\u4e00-\u9fa5]{2,8}$/
  var reg4=/^\d{6}$/
  var reg5=/^[\w]{6,16}$/
  var tel=document.querySelector('.phone')
  var qq=document.querySelector('.qq')
  var name=document.querySelector('.name')
  var code=document.querySelector('.code')
  var pwd=document.querySelector('.pwd')
  var repwd=document.querySelector('.repwd')
  // var span=document.querySelector('.before')
  function RegExp(obj,reg){
    obj.onblur=function(){
      if(reg.test(this.value)){
        console.log('成功');
        // span.innerHTML='<i class="success">成功'
        this.nextElementSibling.className='success'
        this.nextElementSibling.innerHTML='成功'
        // span.className='success'
      }else{
        console.log('失败');
        // span.innerHTML='error'
        // span.className='wrong'
        this.nextElementSibling.className='wrong'
        this.nextElementSibling.innerHTML='失败'
      }
    }
  }

  repwd.onblur=function(){
    if(this.value==pwd.value&&this.value!==''){
      this.nextElementSibling.innerHTML='输入正确'
      this.nextElementSibling.className='success'
    }else{
      this.nextElementSibling.innerHTML='输入不一致'
      this.nextElementSibling.className='wrong'
    }
  }
  RegExp(tel,reg1)
  RegExp(qq,reg2)
  RegExp(name,reg3)
  RegExp(code,reg4)
  RegExp(pwd,reg5)
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .form{
      width: 400px;
      height: 400px;
      border: 2px solid teal;
      border-radius: 5px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      /* text-align: center; */
      padding-left: 50px;
    }
    .form li{
      list-style: none;
      margin-top: 20px;
    }
    input{
      border:1px solid blue;
      height: 20px;
      /* vertical-align:middle */
    }
    .success{
      color: limegreen;
    }
    .wrong{
      color:tomato
    }
    .f{
      width:100px;
      float:left;
      text-align:right;
    }  
  </style>
  <script src="./regform.js"></script>
</head>
<body>
  <form action="" method="post" class="form">
    <ul>
      <li>
        <span class="f">手机号：</span>
        <input type="text" class="phone">
        <span></span>
      </li>
      <li>
        <span class="f">qq：</span>
        <input type="text" class="qq">
        <span></span>
      </li>
      <li>
        <span class="f">昵称：</span>
        <input type="text" class="name">
        <span></span>
      </li>
      <li>
        <span class="f">验证码：</span>
        <input type="text" class="code">
        <span></span>
      </li>
      <li>
        <span class="f">密码：</span>
        <input type="text" class="pwd">
        <span></span>
      </li>
      <li>
        <span class="f">确认密码：</span>
        <input type="text" class="repwd">
        <span></span>
      </li>
    </ul>
  </form>
</body>
<scrip>

</scrip>
</html>

Formattor

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则表达式

Regular Expression对象作用匹配替换提取定义var reg=new RegExp(/123/)var reg2=/124/// 测试console.log(reg2.test(124));字符解释^开始$结尾[]字符集，任何一个都行,加上边界符就表示仅一个-范围[^]取反*0-∞+>1?0-1{3}重复3次{3,}≥3{3,16}3-16()其中所有
复制链接

扫一扫