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

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

html 复制代码
你可以使用JavaScript来实现前端表单的验证逻辑。以下是一个示例代码,
用于检查用户名和密码是否符合要求,并阻止表单提交:


<form id="loginForm" onsubmit="return validateForm()">
  <label for="name">用户名:</label>
  <input type="text" id="name" name="name" required><br><br>
  
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required><br><br>
  
  <input type="submit" value="登录">
</form>

<script>
function validateForm() {
  var name = document.getElementById("name").value;
  var password = document.getElementById("password").value;
  
  // 验证用户名
  if (!/^[a-zA-Z0-9]+$/.test(name)) {
    alert("用户名必须由全部英文或数字组成");
    return false;
  }
  
  // 验证密码
  if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,20}/.test(password)) {
    alert("密码必须包含大小写字母和数字,且长度在8到20之间");
    return false;
  }
  
  // 表单验证通过,可以提交
  return true;
}
</script>

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

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

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

java 复制代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
    String name=request.getParameter("name");
    String password=request.getParameter("password");
    if(name==null||password==null){
    	
    }
    else{
    	out.println(name+"<br>");
    	out.println(password+"<br>");
    	return;
    }
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<form id="loginForm" method="post" action="index.jsp" onsubmit="return validateForm()">
  <label for="name">用户名:</label>
  <input type="text" id="name" name="name" required><br><br>
  
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required><br><br>
  
  <input type="submit" value="登录">
</form>
 
<script>
function validateForm() {
  var name = document.getElementById("name").value;
  var password = document.getElementById("password").value;
  
  // 验证用户名
  if (!/^[a-zA-Z0-9]+$/.test(name)) {
    alert("用户名必须由全部英文或数字组成");
    return false;
  }
  
  // 验证密码
  if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,20}/.test(password)) {
    alert("密码必须包含大小写字母和数字,且长度在8到20之间");
    return false;
  }
  
  // 表单验证通过,可以提交
  return true;
}
</script>
 
 
</body>
</html>
相关推荐
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具6 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端