JavaScript实现表单验证

Leefs 2020-04-12 PM 259℃ 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面试题

评论啦~

You got a dream, you gotta protect it.2019年11月20日 11:38:38
It's great to have dreams.2019年11月17日 09:20:57
We are already all ready to work every day in everyday life.2019年10月28日 22:31:51
Do you love me?2019年10月27日 16:46:16
We're on the path.2019年10月23日 10:16:49
Better before than during.2019年10月22日 22:45:01
Don’t wait. The time will never be just right.2019年10月21日 10:38:13
Doing the things you want to do.2019年10月20日 10:23:06
Small steps lead to big accomplishments.2019年10月19日 20:50:27
The end is always right there in the beginning.2019年10月18日 10:26:24
Never let anything stop you from chasing your dream.2019年10月17日 10:49:06
You got things to do. Places to go. People to see. Futures to make.2019年10月16日 10:12:44
A wise man will make more opportunities than he finds.2019年10月15日 10:15:54

Java Java编程思想 JavaSE Elasticsearch 持有对象数据结构和算法数据结构并发编程正则表达式 Linux JVM 字符串容器深入研究 Docker MySQL 前端排序 SpringCloud Hbase SpringBoot Redis Spark 二叉树锁 VUE 栈 nginx Thymeleaf Jquery 递归

小刘博客范明明

JavaScript实现表单验证

评论啦~

栏目分类

博主动态 ~

标签云

友情链接申请

JavaScript实现表单验证

 评论啦~

 栏目分类

博主动态 ~

标签云

友情链接申请

评论啦~

栏目分类

博主动态 ~

标签云

友情链接申请