正则简单表单验证

最新推荐文章于 2023-01-10 12:21:22 发布

Darlingmi

最新推荐文章于 2023-01-10 12:21:22 发布

阅读量258

点赞数 6

分类专栏：练习题文章标签：正则表达式 css javascript

本文链接：https://blog.csdn.net/Darlingmi/article/details/117931399

版权

练习题专栏收录该内容

9 篇文章 1 订阅

订阅专栏

利用正则表达式、form表单、失去焦点函数制作一个简单的表单验证：
在这里插入图片描述
Js代码如下：

 <script>
        var reg=/^[a-zA-Z0-9_-]{6,16}$///允许用户输入英文字母（不区分大小写）数字短横线下划线长度为6~16位的正则表达式
        var reg1=/^[a-zA-Z0-9]{8,16}$/
        var uname=document.querySelector('.uname')//获取元素
        var passw=document.querySelector('.passw')
        var passwo=document.querySelector('.passwo')
        var span1=document.querySelector('.span1')
        var span2=document.querySelector('.span2')
        var span3=document.querySelector('.span3')
        var zc=document.querySelector('#zc')

        uname.onblur=function(){//给uname注册失去焦点的函数
            if(reg.test(this.value)){//符合正则表达式
                span1.className='success'
                span1.innerHTML='用户名可用'
            }else{
                span1.className='wrong'
                span1.innerHTML='用户名不可用'
            }
        }
        passw.onblur=function(){
         if(reg1.test(this.value)){
            span2.className='success'
            span2.innerHTML='密码可用'
            }else{
            span2.className='wrong'
            span2.innerHTML='密码不可用'
            }
         }
         passwo.onblur=function(){
             if(this.value==passw.value){
                span3.className='success'
                 span3.innerHTML='密码一致'
             }else{
                span3.className='wrong'
                span3.innerHTML='密码不一致'
             }
         }
         zc.onclick=function(){
             if(span1.className=='success'&&span2.className=='success'&&span3.className=='success'){//三个input控件都满足正则时
              alert('注册成功')
             }
         }
        

    </script>

css和body代码如下：

<style>
    .success{//满足正则，显示绿色字
        color:green;
    }
    .wrong{
        color: red;
    }
</style>

<body>
    
    <input type='text' class='uname'><span class='span1'></span><br><br>
    <input type='password' class='passw'><span  class='span2'></span><br><br>
    <input type='password' class='passwo'><span class='span3'></span><br><br>
    <button id='zc'>注册</button>&nbsp;&nbsp;&nbsp;<button>登录</button>
</body>

Darlingmi

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
正则简单表单验证

<script> var reg=/^[a-zA-Z0-9_-]{6,16}$/ var reg1=/^[a-zA-Z0-9]{8,16}$/ var uname=document.querySelector('.uname') var passw=document.querySelector('.passw') var passwo=document.querySelector('.passwo') .
复制链接

扫一扫