前端实例14——登录校验

我会带着你远行 2023-03-01 12:50 37阅读 0赞

**效果图**  
![在这里插入图片描述][20200726102648614.png]

**HTML，css，js**

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>登录校验</title>
        <style> .login, .reset { margin: 0 30px; } </style>
    
    </head>
    <body>
    <form action="" class="f1">
        <p>
            <label>用户名：
                <input type="text" class="need" name="username">
                <span></span>
            </label>
        </p>
        <p>
            <label>密   码：
                <input type="password" class="need" name="password">
                <span></span>
            </label>
        </p>
        <p>
            <input type="submit" class="login" value="登录">
            <input type="reset" class="reset" value="重置">
        </p>
    </form>
    <script src="jquery-3.5.1.min.js"></script>
    <script> $(".login").on("click", function () { var $needEle = $(".need"); for (var i = 0; i < $needEle.length; i++) { var $needEleVal = $($needEle[i]).val(); if (!$needEleVal.trim()) { $($needEle[i]).next().text($($needEle[i]).parent().text().replace(/\s/ig,'').slice(0,-1)+"不能为空"); $($needEle[i]).next().css("color","red"); return false; }else { $($needEle[i]).next().text(""); } } return true; }); $(".reset").on("click",function () { var $PEle = $(this).parent().prevAll(); // console.log($PEle); for (var i=0;i<$PEle.length;i++){ var $spanEle = $($($PEle[i]).children().children()).last(); $spanEle.text(""); } }); </script>
    </body>
    </html>

[20200726102648614.png]: /images/20230208/3c4f0778cedd46d6820cddc1335afcaa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，37人围观）

还没有评论，来说两句吧...

相关阅读

相关 jwt做登录校验流程？

客户端使用用户名和密码请求登录，服务端收到请求，验证用户名和密码

你的名字/ 2024年04月21日 19:26/ 0 赞/ 108 阅读

相关常用前端校验

* 验证身份证合法性 function checkId(id){ var flag=true; var reg = /^(\d{1...

Dear 丶/ 2024年04月18日 10:43/ 0 赞/ 85 阅读

相关 JWT Token 校验登录

JWT & token 1. 什么是token认证？ > 基于token的[用户认证][Link 1]是一种服务端无状态的认证方式，所谓[服务端][Link 2]无

﹏ヽ暗。殇╰゛Y/ 2024年03月24日 18:57/ 0 赞/ 101 阅读

相关 14. 练习：登录注册系统

![在这里插入图片描述][db9302c4fd784229a92ce4607e4d137d.png] Hi，大家好。我是茶桁。上一节课，我们详细的介绍了文件读写的流程和原

- 日理万妓/ 2024年03月23日 20:56/ 0 赞/ 95 阅读

相关前端登录界面

一、前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

落日映苍穹つ/ 2023年09月29日 16:29/ 0 赞/ 45 阅读

相关前端实例14——登录校验

效果图 ![在这里插入图片描述][20200726102648614.png] HTML，css，js <!DOCTYPE html> <html la

我会带着你远行/ 2023年03月01日 12:50/ 0 赞/ 38 阅读

相关前端---前端常用的表单校验(正则校验)

function validate1(str){ //只能是0、正整数 var exp = /^([0]|[0-9])$/; var flag =

灰太狼/ 2022年12月01日 14:29/ 0 赞/ 291 阅读

相关前端校验

前端校验前端校验地位各校验方式的比较（from:[http://www.openwebx.org/docs/Webx3\_Guide\_Book.html

清疚/ 2022年07月12日 14:59/ 0 赞/ 218 阅读

相关 Struts2拦截器实例——登录校验

登录校验拦截器除了登录请求不被拦截，对用户的所有其他请求进行拦截。对没有登录的用户如果访问其他需要用户的页面进行页面跳转，从新跳转回登录页面。进行登录操作实现过程

约定不等于承诺〃/ 2022年05月16日 05:51/ 0 赞/ 262 阅读

相关 SpringBoot——JWT实现登录校验

实现的效果是，在的客户端登录时会返回一个token用作客户端后续登录校验，登录之后客户端需要将token放在请求的head中，否则返回的登录失败。话不多说直接上代码。 1.J

爱被打了一巴掌/ 2021年10月18日 14:46/ 0 赞/ 351 阅读