欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript实现简单表单验证

程序员文章站 2022-07-15 16:51:56
...

在我们进行注册的时候，把鼠标点进“请输入帐号”的输入框时，输入框的旁边会有提示信息，提示我们要输入的信息格式，在我们输入后鼠标点进下一个输入框时，已经填写过的输入框会对于我们填入的内容进行判断，若不符合要求会提示我们重新输入，大致如下图所示:
JavaScript实现简单表单验证

JavaScript实现简单表单验证

上述功能的实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>
<body>

    <form action="" id="my">
        手机号: <input type="text" name="username"><span id="message"></span><br>
        密码: <input type="password"><br>
        <input type="submit" value="注册">
    </form>
    <script>
        //获取表单信息
        var content=document.getElementById('my');
        //获取提示信息内容
        var ts=document.getElementById('message');
        //定义变量存放手机号
        var val=null;
        //定义变量存放正则表达式
        var reg=null

        // onfocus 获取焦点事件
        content.username.onfocus=function(){
            ts.innerHTML='请输入11位有效手机号';
            ts.style.color='green';
        }

        //onblur 失去焦点事件
        content.username.onblur=function(){
            val=content.username.value;
            reg=/^1\d{10}$/;

            if(reg.test(val)){
                ts.innerHTML='手机号可用';
                ts.style.color='blue';
            }else{
                ts.innerHTML='手机号无效';
                ts.style.color='red';
            }
        }

        //onsubmit提交事件
        content.onsubmit=function(){
            if(!reg.test(val)){
                //默认取消操作
                return false;
            }
        }
    </script>

</body>
</html>

上一篇： C++虚继承与继承

下一篇： C++学习笔记_5_ 类与对象(2)

推荐阅读