【Web】Web-API（No.64）DOM案例（三）表单验证

本文链接：https://blog.csdn.net/qq_43251850/article/details/99411087

表单验证

效果图

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-image: url(img/big2.jpg);
            background-size: cover;
        }

        .box {
            margin: 100px auto;
            width: 600px;
            height: 220px;
            background-color: #abcdef;
            padding-top: 20px;
        }

        .box table {
            margin: 0 auto;
            border: 3px solid #cccccc;
            width: 550px;
            height: 180px;
            padding-left: 35px;
        }

        .box table .one {
            font-size: 15px;
            width: 120px;
            text-align: right;
        }

        .box table .two {
            width: 200px;
        }

        .box table .three {
        }

        .box table tr td input {
            border: 1px solid #cccccc;
            width: 200px;
            background-color: #ffffff;
            font-size: 14px;
            color: #999999;
            height: 26px;
        }

        .wrong {
            color: red;
            font-size: 12px;
        }

        .right {
            color: green;
        }
    </style>
</head>
<body>
<div class="box">
    <table id="tab">
        <tr>
            <td class="one">Email地址：</td>
            <td class="two"><input type="text" value="请输入含@的邮箱地址" id="address"></td>
            <td id="checkEmail"></td>
        </tr>
        <tr>
            <td class="one">设置昵称：</td>
            <td class="two"><input type="text" value="请输入您的昵称" id="username"></td>
            <td class="three"><span id="checkName"></span></td>
        </tr>
        <tr>
            <td class="one">设定密码：</td>
            <td class="two"><input type="password" value="" id="password"></td>
            <td class="three"><span id="checkPassword"></span></td>
        </tr>
        <tr>
            <td class="one">再输入一次密码：</td>
            <td class="two"><input type="password" value="" id="surePwd"></td>
            <td class="three"><span id="checkPwd"></span></td>
        </tr>
    </table>
</div>
<script src="common.js"></script>
<script>
    // Email地址栏验证
    my$("address").onfocus = function ()
    {
        if (this.value =="请输入含@的邮箱地址")
        {
            this.value = "";
        }
    }
    my$("address").onblur = function ()
    {
        var address =/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        if (this.value == "")
        {
            this.value = "请输入含@的邮箱地址";
            wrong("address","checkEmail");
        }
        if (address.test(this.value)==true)
        {
            right("address","checkEmail");
        }else
        {
            wrong("address","checkEmail");
        }
    }
    //设置昵称验证
    my$("username").onfocus =function ()
    {
        if (this.value =="请输入您的昵称")
        {
            this.value = "";
        }
    }
    my$("username").onblur =function ()
    {
        if (this.value =="")
        {
            this.value = "请输入您的昵称";
            checkName("username","checkName","昵称为必填项，请输入您的昵称");
        }
        else
        {
            right("username","checkName");
        }
    }
    //密码栏验证
    var pwd = "";
    my$("password").onblur =function ()
    {
        if (this.value =="")
        {
            checkName("password","checkPassword","密码为必填项，请设置您的密码");
        }
        else
        {
            pwd = this.value;
            console.log(pwd);
            right("password","checkPassword");
        }
    }
    //确认密码栏验证
    my$("surePwd").onblur =function ()
    {
        if (this.value =="")
        {
            checkName("surePwd","checkPwd","请再次输入您的密码");
        }
        else
        {
            if(this.value==pwd)
            {
                right("surePwd","checkPwd");
            }else
            {
                checkName("surePwd","checkPwd","两次输入的不一致，请重新输入");
            }

        }
    }
    // 封装正误函数
    //wrong
    function wrong(id,other)
    {
        my$(id).style.border = "1px solid red";
        my$(id).style.color = "red";
        my$(other).innerText = "×";
        my$(other).className = "wrong";
    }
    //right
    function right(id,other)
    {
        my$(id).style.color = "black";
        my$(id).style.border = "1px solid green";
        my$(other).innerText = "√";
        my$(other).className = "right";
        my$(other).style.border = "none";
        my$(other).style.backgroundColor="rgb(255,255,255)";
    }
    //昵称有误的函数
    function checkName(id,other,str)
    {
        my$(id).style.border = "1px solid red";
        my$(id).style.color = "red";
        my$(other).style.border = "1px solid red";
        my$(other).style.backgroundColor="rgb(255,247,215)"
        my$(other).innerText = str;
        my$(other).className = "wrong";
    }

</script>
</body>
</html>

commom.js

// 通过id名获取的元素
function my$(id) {
    return document.getElementById(id);
}

//通过标签名获取的元素
function ele$(element) {
    return document.getElementsByTagName(element);
}

//设置任意的标签中的任意文本内容
function setInnerText(element, text) {
    //判断是否支持这个属性
    if(typeof element.textContent == "undefined"){
        console.log(element.textContent+"====");
        //说明不支持
        element.innerText = text;
    }else{
        console.log(element.textContent);
        element.textContent = text;
    }
}

//封装 获取任意标签中的文本内容. 需要返回值
function getInnerText(element){
    if(element.textContent == undefined){
        return element.innerText;
    }else{
        return element.textContent;
    }
}

//封装一个获取任意一个父级元素的第一个子元素
function getFirstElementChild(parentElement) {
    if(parentElement.firstElementChild){
        //隐式布尔类型转换 --->true
        //如果支持
        return parentElement.firstElementChild;
    }else{
        return parentElement.firstChild;
    }
}

//为任意元素，绑定任意事件，执行任意的处理函数
function addEventListener(element,type,fn){
    //判断是不是支持这个方法  对象.方法名同样可以判断
    if(element.addEventListener){
        element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
        element.attachEvent("on" + type,fn);
    }else{
        element["on" + type] = fn;
    }
}

//颜色值固定，只更改透明度的函数
function getRGB()
{
    var opacity = "";
    opacity = Math.floor(Math.random()*10)/10;
    return opacity;
}
// 颜色值随机，透明度也随机
function getRandomColor()
{
    var str = "rgba(";
    var opacity = "";
    for (var i =0;i<3;i++)
    {
        str+=Math.floor(Math.random() * 255)+",";
    }
    opacity = Math.floor(Math.random()*10)/10;
    str=str+opacity+")";
    console.log(str);
    return str;
}