JavaScript实现表单验证

Leefs 2020-04-12 PM 2750℃ 0条

# JavaScript实现表单验证

JavaScript实现表单验证功能

![43.图片切换03.png][1]

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        #prompt{
            font-size:12px;
            color:darkgray;
        }
        #score{
            border:1px solid darkgray;
        }
        .right{
            background:url('right.jpg') no-repeat 5px center;
            background-size:15px 15px;
            padding-left:20px;
            color:lightgreen !important;
        }
        .error{
            background:url('error.jpg') no-repeat 5px center;
            background-size:15px 15px;
            padding-left:20px;
            color:red !important;
        }
    </style>
</head>
<body>
    <div id="box">
        
        <label for='score'>您的成绩：</label>
        <input type="text" placeholder="请输出分数" id="score">
        <span id="prompt" class="right">请输出您的成绩</span>
    </div>
    <script type="text/javascript">
        function $(id){
            return typeof id === 'string'?document.getElementById(id):null;
        }
        //input输入框失去焦点
        $('score').onblur=function(){
            //1.获取输入的内容
            var value=parseFloat(this.value);
            console.log(typeof value);
            //2.验证
            console.log(isNaN(value));
            if(isNaN(value)){
                //不是一个数
                $('prompt').innerHTML='输入的成绩不正确';
                //$('prompt').setAttribute("class","error");
                $('prompt').className='error';
                this.style.borderColor='red';
            }else if(value >=0 && value<=100){
                //合法成绩
                $('prompt').innerHTML='输入的成绩正确';
                //$('prompt').setAttribute("class","error");
                $('prompt').className='right';
                this.style.borderColor='lightgreen';
            }else{
                //输入成绩超出范围
                $('prompt').innerHTML='成绩必须在0~100之间';
                $('prompt').className='error';
                this.style.borderColor='red';
            }
        }
        //input输入框获取焦点  恢复原来的状态
        $('score').onfocus=function(){
            $('prompt').innerHTML="请输入您的成绩";
            $('prompt').className='';
            $('score').style.borderColor='darkgray';
            $('score').style.outline='none';
            $('score').value='';
        }
    </script>
</body>
</html>
```

[1]: https://lilinchao.com/usr/uploads/2020/04/1513252415.png

标签: JavaScript

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://lilinchao.com/archives/844.html

上一篇【转载】Eclipse中Git操作

下一篇【转载】5个刁钻的String面试题

JavaScript实现表单验证

评论啦~

栏目分类

标签云

友情链接申请

JavaScript实现表单验证

 评论啦~

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请