利用jquery实现前端同步请求---判断姓名是否为空并设置事件

使用Ajax与jQuery进行表单验证

最新推荐文章于 2021-06-04 18:44:01 发布

weixin_30312659

最新推荐文章于 2021-06-04 18:44:01 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoshenke/p/10996555.html

本文介绍如何使用Ajax和jQuery实现网页表单的实时验证功能，包括失去焦点时检查用户名是否为空，并在提交前再次确认。通过具体代码示例，展示了如何集成jQuery库并利用其强大的选择器和事件处理功能。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>ajax</title>
    <script src="/ajax/js/jquery-3.3.1.min.js"></script>
  </head>
  <body>
  <form action="http://www.ubfgho.com/" method="post">
姓名：<input type="text" name="name"><span></span><br>
密码：<input type="password" name="psw"><br>
    <input type="submit" value="提交"><br>
  </form>
  </body>
  <script>
//1、失去焦点事件--判断姓名是否为空
    $(':text').blur(function () {
var v=$(this).val()
if (v.trim()==""){
            $("span").html("姓名为空").css("color","red")
        }else{
            $("span").html("")//清空span
        }
    })
//2、提交事件---点击提交按钮触发submit
    $("form").submit(function () {
//选中text文本
        var v=$(':text').val().trim();
if (v==""){
//如果姓名为空。就返回false，阻止提交，
            return false
        }
    })


  </script>
</html>

转载于:https://www.cnblogs.com/xiaoshenke/p/10996555.html