js小案例:表单验证

作者: 冒险小A | 来源:发表于2018-07-10 20:50 被阅读0次

js小案例:表单验证
工作中用到的前端框架插件
案例：表单验证
表单验证案例
表单验证课堂笔记
vue-validator
群邮VI - 汇总
群邮 VI - 技术组部分
js表单验证
js 表单验证

未点击时

输入为空时

输入不为数字时

输入不在范围内时(1-100)

像小A一样拿了一百昏时~

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入成绩</title>
</head>
<style>
    #prompt {
        font-size: 10px;
        color: darkgrey;
    }

    #score {
        border: 1px solid darkgrey;
    }
    /*正确时的样式,用于动态调用*/
    .right {
        background: url("images/right.png") no-repeat;/*对勾图案*/
        background-size: 13px 13px;
        padding-left: 15px;
        color: #91b914 !important;/*因为id属性优先于class属性,在#prompt中设置过color,所以此时要用important来发挥作用*/
    }
    /*错误时的样式,用于动态调用*/
    .error {
        background: url("images/error.png") no-repeat;/*叉叉图案*/
        background-size: 13px 13px;
        padding-left: 15px;
        color: #ef1d1e !important;
    }
</style>
<body>
<div id="box">
    <label>您的成绩:</label>
    <input id="score" type="text" placeholder="请输入分数">
    <span id="prompt">请输入您的成绩</span>
</div>
<script>
    window.onload = function () {
        //封装获取对应id的元素的操作
        function $(id) {
            return typeof id === "string" ? document.getElementById(id) : null;
        }

        //当元素失去交点时
        $("score").onblur = function () {
            //获取输入的内容
            var score = parseFloat($("score").value);
            if (isNaN(score)) {//如果值不是一个数
                $("prompt").innerText = "输入成绩不正确";
                $("prompt").className = "error";
                $("score").style.borderColor = "red";
            }else if (score >= 0 && score <= 100) {//值为数字且在0-100之间
                $("prompt").innerText = "输入成绩正确";//改字
                $("prompt").className = "right";//改class用来匹配不同的样式
                $("score").style.borderColor = "green";//输入框改颜色
            }else{
                $("prompt").innerText = "输入成绩不正确";//值为数字但是不在0-100之间
                $("prompt").className = "error";
                $("score").style.borderColor = "red";
            }
        }
    };
</script>
</body>
</html>

然后经过封装相同代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入成绩</title>
</head>
<style>
    #prompt {
        font-size: 10px;
        color: darkgrey;
    }

    #score {
        border: 1px solid darkgrey;
    }
    /*正确时的样式,用于动态调用*/
    .right {
        background: url("images/right.png") no-repeat;/*对勾图案*/
        background-size: 13px 13px;
        padding-left: 15px;
        color: #91b914 !important;/*因为id属性优先于class属性,在#prompt中设置过color,所以此时要用important来发挥作用*/
    }
    /*错误时的样式,用于动态调用*/
    .error {
        background: url("images/error.png") no-repeat;/*叉叉图案*/
        background-size: 13px 13px;
        padding-left: 15px;
        color: #ef1d1e !important;
    }
</style>
<body>
<div id="box">
    <label>您的成绩:</label>
    <input id="score" type="text" placeholder="请输入分数">
    <span id="prompt">请输入您的成绩</span>
</div>
<script>
    window.onload = function () {
        //封装获取对应id的元素的操作
        function $(id) {
            return typeof id === "string" ? document.getElementById(id) : null;
        }

        /**
         * 封装更改样式的操作
         * @param {string}msg 提示信息
         * @param {string}className 样式
         * @param {string}color 输入框颜色
         */
        function dealStyle(msg,className,color){
            $("prompt").innerText = msg;
            $("prompt").className = className;
            $("score").style.borderColor = color;
        }
        //当元素失去交点时
        $("score").onblur = function () {
            //获取输入的内容
            var score = parseFloat($("score").value);
            if (isNaN(score)) {//如果值不是一个数
                dealStyle("输入成绩不正确","error","red");
            }else if (score >= 0 && score <= 100) {//值为数字且在0-100之间
                dealStyle("输入成绩正确","right","green");
            }else{
                dealStyle("输入成绩不正确","error","red");
            }
        }
    };
</script>
</body>
</html>