jquery——input获取焦点和失去焦点 & 判断输入框是否为空 & 验证两次输入的密码是否一致

jquery——input获取焦点和失去焦点 & 判断输入框是否为空 & 验证两次输入的密码是否一致代码1、焦点事件来判断输入框是否为空<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>form表单验证</title><sc

viceen

2287人浏览 · 2021-06-14 20:43:15

viceen · 2021-06-14 20:43:15 发布

jquery——input获取焦点和失去焦点 & 判断输入框是否为空 & 验证两次输入的密码是否一致

代码

1、焦点事件来判断输入框是否为空

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>form表单验证</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <div>
        姓名<input id="test1" type="text" />
    </div>
</body>
</body>
<script type="text/javascript">
    $(function () {
        $("input").focus(function () {
            $("input").css("background-color", "red");
        });
        $("input").blur(function () {
            $("input").css("background-color", "#D6D6FF");
            var input_val = $('#test1').val();
            if (!input_val) {
                alert("姓名不能为空");
            }
        });
    })()
</script>

</html>

2、验证两次输入的密码是否一致

示意图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单验证</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        input{
            width:200px;
            height:25px;
            margin-bottom: 5px;
        }
        #test1{
            margin-left: 15px;
        }
    </style>
</head>
<body>
   <div>
         输入密码<input id="test1" type="text"/><br>
         确认密码<input id="test2" type="text" onchange="Verificate()"/>
    </div>
</body>
</body>
<script type="text/javascript">
       function Verificate(){
           var input1_val = $('#test1').val();
           var input2_val = $('#test2').val();
           if(input2_val == input1_val){
               alert("密码一致");
           }else{
               alert("两次密码应一致哦")
           }
       }
</script>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。