devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

通过Ai帮我们写前端界面设计_ai 前端代码

作者：从前慢现在也慢 | 2024-04-15 09:18:34

赞

踩

ai 前端代码

现在我要写一个前端界面，from表单，让用户登录使用的，提交表单之前先分析用户名和密码是否填的完成，并且检查密码必须满足 包含大小写，数字，密码长度必须在8到20之间，不满足不可以提交。用户名必须是全部英文或数字组成，不可以是汉字，如果不满足，也不可以提交，并给出合理提示，提交时用户名对应的name是 name 密码对应的name是password

  1. 你可以使用JavaScript来实现前端表单的验证逻辑。以下是一个示例代码，
  2. 用于检查用户名和密码是否符合要求，并阻止表单提交：
  3.  
  4.  
  5. <form id="loginForm" onsubmit="return validateForm()">
  6.   <label for="name">用户名:</label>
  7.   <input type="text" id="name" name="name" required><br><br>
  8.   
  9.   <label for="password">密码:</label>
  10.   <input type="password" id="password" name="password" required><br><br>
  11.   
  12.   <input type="submit" value="登录">
  13. </form>
  14.  
  15. <script>
  16. function validateForm() {
  17.   var name = document.getElementById("name").value;
  18.   var password = document.getElementById("password").value;
  19.   
  20.   // 验证用户名
  21.   if (!/^[a-zA-Z0-9]+$/.test(name)) {
  22.     alert("用户名必须由全部英文或数字组成");
  23.     return false;
  24.   }
  25.   
  26.   // 验证密码
  27.   if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,20}/.test(password)) {
  28.     alert("密码必须包含大小写字母和数字，且长度在8到20之间");
  29.     return false;
  30.   }
  31.   
  32.   // 表单验证通过，可以提交
  33.   return true;
  34. }
  35. </script>
  36.  
  37.

在上面的代码中，我们首先为表单添加了一个id属性，方便JavaScript中获取表单元素。然后，在表单的onsubmit事件中调用validateForm()函数进行验证。

在validateForm()函数中，我们首先获取用户名和密码的值。然后使用正则表达式对用户名和密码进行验证。如果不满足要求，就弹出一个提示框并返回false，阻止表单的提交。如果用户名和密码都符合要求，返回true，允许表单提交。

注意：这只是一个前端的简单验证逻辑，为了保证安全性，后端服务器也应该对用户名和密码进行验证。前端验证只是为了提升用户体验和减轻服务器压力。

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3.     <%
  4.     String name=request.getParameter("name");
  5.     String password=request.getParameter("password");
  6.     if(name==null||password==null){
  7.     	
  8.     }
  9.     else{
  10.     	out.println(name+"<br>");
  11.     	out.println(password+"<br>");
  12.     	return;
  13.     }
  14.     %>
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18. <meta charset="UTF-8">
  19. <title>Insert title here</title>
  20. </head>
  21. <body>
  22.  
  23. <form id="loginForm" method="post" action="index.jsp" onsubmit="return validateForm()">
  24.   <label for="name">用户名:</label>
  25.   <input type="text" id="name" name="name" required><br><br>
  26.   
  27.   <label for="password">密码:</label>
  28.   <input type="password" id="password" name="password" required><br><br>
  29.   
  30.   <input type="submit" value="登录">
  31. </form>
  32.  
  33. <script>
  34. function validateForm() {
  35.   var name = document.getElementById("name").value;
  36.   var password = document.getElementById("password").value;
  37.   
  38.   // 验证用户名
  39.   if (!/^[a-zA-Z0-9]+$/.test(name)) {
  40.     alert("用户名必须由全部英文或数字组成");
  41.     return false;
  42.   }
  43.   
  44.   // 验证密码
  45.   if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,20}/.test(password)) {
  46.     alert("密码必须包含大小写字母和数字，且长度在8到20之间");
  47.     return false;
  48.   }
  49.   
  50.   // 表单验证通过，可以提交
  51.   return true;
  52. }
  53. </script>
  54.  
  55.  
  56. </body>
  57. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/426986?site
推荐阅读