实现用户登录注册页面jQuery验证不能为空的提示以及确认密码与第一次输入密码不匹配的提示功能

本文介绍了一种使用jQuery blur事件来验证表单字段的方法。当用户离开输入框时,会检查用户名、邮箱、密码及其确认密码是否为空,并即时显示错误提示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用到了blur方法,

当元素失去焦点时发生 blur 事件。

blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码

script代码如下:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
   $(function () {
        $("#username").blur(function(){
            $("#names").empty();
           var name = $(this).val();
            if(name=="" || name==null){
               $("#username").after("<span id='names' style='color: red'>用户名不能为空</span>");
            }
        });
        $("#email").blur(function(){
            $("#emails").empty();
             var mail = $(this).val();
             if(mail==""|| mail==null){
                 $("#email").after("<span id='emails' style='color: red'>邮箱不能为空</span>");
             }
         });
       $("#password").blur(function(){
           $("#pwds").empty();
            var pwd = $(this).val();
            if(pwd==""|| pwd==null){
                $("#password").after("<span id='pwds' style='color: red'>密码不能为空</span>");
            }
        });
       $("#re-password").blur(function(){
           $("#repwds").empty();
            var repwd = $(this).val();
            var pwd=$("#password").val();
            if(repwd==""|| repwd==null){
                $("#re-password").after("<span id='repwds' style='color: red'>请确认密码</span>");
            }
            if(repwd!=pwd){
                $("#re-password").after("<span id='repwds' style='color: red'>两次密码不匹配,请重新输入!</span>");
            }
        });
    });
    </script>

jsp代码:

<body class="container" ng-app="myApp" ng-controller="controller">

<div class="col-md-3 col-md-offset-3">
    <div class="form-group">
        <label >username</label>
        <input type="text" class="form-control" name="username" id="username">
    </div>

<div class="form-group">
        <label >email</label>
        <input type="text" class="form-control" name="email" id="email">
    </div>
    <div class="form-group">
        <label >password</label>
        <input type="password" class="form-control" name="repassword" id="password">
    </div>
   <div class="form-group">
        <label >repassword</label>
        <input type="password" class="form-control" name="password" id="re-password">
    </div>
    <button type="button" class="btn btn-info" id="submit">Submit</button>
</div>
</body>

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值