• 如何添加判断账号为手机号且为11位数；密码且为6位数；且有姓名；和选择男女；和上传图片（如有错误请指点）

    可以在函数 `register()` 内添加一段代码来判断输入的用户信息是否符合要求，可以使用正则表达式进行判断。

    例如，可以添加以下代码：

    这段代码在 `register()` 函数开头，使用正则表达式来验证手机号和密码是否符合要求。如果不符合要求，直接返回，并显示相应的错误信息。然后判断姓名、性别和是否上传了图片，如果不符合要求，也直接返回，并显示相应的错误信息。

    1. ```javascript
    2. const telRegex = /^1\d{10}$/; // 手机号正则表达式，匹配以 1 开头的 11 位数字
    3. const passRegex = /^\d{6}$/; // 密码正则表达式，匹配 6 位数字
    4. const name = $('#namex').val();
    5. const gender = $('input[name="ss"]:checked').val(); // 获取选中的性别
    6.  
    7. if (!telRegex.test($('#name').val())) {
    8.   $('#alert').text("请输入正确的手机号");
    9.   $('#alert').slideToggle(200);
    10.   return; // 如果手机号不符合要求，直接返回，不执行后续代码
    11. }
    12.  
    13. if (!passRegex.test($('#password').val())) {
    14.   $('#alert').text("密码必须是6位数字");
    15.   $('#alert').slideToggle(200);
    16.   return; // 如果密码不符合要求，直接返回，不执行后续代码
    17. }
    18.  
    19. if (!name) {
    20.   $('#alert').text("请输入姓名");
    21.   $('#alert').slideToggle(200);
    22.   return; // 如果姓名为空，直接返回，不执行后续代码
    23. }
    24.  
    25. if (!gender) {
    26.   $('#alert').text("请选择性别");
    27.   $('#alert').slideToggle(200);
    28.   return; // 如果没有选择性别，直接返回，不执行后续代码
    29. }
    30.  
    31. if (!$('#imgs').val()) {
    32.   $('#alert').text("请选择上传图片");
    33.   $('#alert').slideToggle(200);
    34.   return; // 如果没有上传图片，直接返回，不执行后续代码
    35. }
    36. ```

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 		<title>注册</title>
    7. 		<script src="./js/jquery-3.7.0.js"></script>
    8. 		<link rel="stylesheet" href="./css/item.css" />
    9. 	</head>
    10. 	<body>
    11. 		<!-- 顶部图片 -->
    12. 		<div>
    13. 			<img src="./img/10001 - 副本.png" alt="" />
    14. 		</div>
    15. 		<!-- 登录及注册 -->
    16. 		<div class="head">
    17. 			<div class="head-left">
    18. 				<div>登录</div>
    19. 			</div>
    20. 			<div class="head-right">
    21. 				<div>注册</div>
    22. 			</div>
    23. 		</div>
    24. 		<!-- 账号及密码 -->
    25. 		<div class="acc">
    26. 			<div>请输入账号：</div>
    27. 		</div>
    28. 		<!-- 账号输入框 -->
    29. 		<div class="name">
    30. 			<input type="text" id="name" />
    31. 		</div>
    32. 		<!-- 密码输入框 -->
    33. 		<div class="add">
    34. 			<div>请输入密码：</div>
    35. 		</div>
    36. 		<!-- 密码输入框 -->
    37. 		<div class="code">
    38. 			<input type="password" id="password" />
    39. 		</div>
    40. 		<!-- 请输入姓名 -->
    41. 		<div class="names">
    42. 			<div>请输入姓名：</div>
    43. 			<input type="text" id="namex" />
    44. 		</div>
    45. 		<!-- 请选择性别 -->
    46. 		<div class="gender" id="gender">
    47. 			<div class="gan-left">
    48. 				<div>请选择性别：</div>
    49. 			</div>
    50. 			<input type="radio" name="ss" value="0"/>
    51. 			<span>男</span>
    52. 			<input type="radio" name="ss" value="1"/>
    53. 			<span>女</span>
    54. 			<input type="radio" name="ss" value="2"/>
    55. 			<span>保密</span>
    56. 		</div>
    57. 		<!-- 选择图片 -->
    58. 		<div class="print">
    59. 			<div>请选择图片：</div>
    60. 			<form id="form">
    61. 				<label>
    62. 					<img src="./img/10016.jpg" alt="" id="imgs" />
    63. 					<input type="file" id="file" name="file" onchange="fileImg()" style="display: none;">
    64. 				</label>
    65.  
    66. 			</form>
    67.  
    68. 		</div>
    69. 		<!-- 注册 -->
    70. 		<div class="footer">
    71. 			<div class="footer-f" onclick="register()">
    72. 				<div>注册</div>
    73. 			</div>
    74. 		</div>
    75. 		<div id="alert">
    76. 			
    77. 		</div>
    78. 		<script src="./js/item.js"></script>
    79. 	</body>
    80. </html>

  • 相关阅读:
    线程纵横：C++并发编程的深度解析与实践
    java类的练习 -- 声明一个接口(Calculability)，接口中
    python经典百题之从小到大输出
    Nacos是如何实现心跳机制和服务续约以及超时剔除服务机制的？
    java计算机毕业设计高校游泳馆信息管理MyBatis+系统+LW文档+源码+调试部署
    Spacewalk
    Workfine新手入门：数据规范之列表
    【Flutter】解决报错 Cannot not find minSdk from android/app/build.gradle or android/local.propertiesSpecif
    头歌数据库备份与恢复
    Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第5章 Vue.js组件 5.2 创建私有组件
  • 原文地址：https://blog.csdn.net/IKUNzhenin/article/details/134090303