js表单提交数据并进行验证

最新推荐文章于 2023-12-06 21:17:00 发布

java.小小白

最新推荐文章于 2023-12-06 21:17:00 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： js javascript html web

男孩@qq1603853843

本文链接：https://blog.csdn.net/weixin_47427198/article/details/112918997

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

表单提交数据并进行验证模拟注册填写信息
html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单提交</title>
		<style>
			input[type="text"],input[type="password"]{
				width: 250px;
			}
		</style>
	</head>
	<body>
		<form action="index.html" method="get" onsubmit="return ons()"><!--οnsubmit="return ons()"-->
			<table align="center">
				<tr>
					<th>会员注册</th>
				</tr>
				<tr>
					<td>用户名 : </td>
					<td><input type="text" id="username" name="username" required placeholder="至少含有一位字母" /></td>
				</tr>
				<tr>
					<td>密码 : </td>
					<td><input type="password" id="password" name="password" required placeholder="必须要有数字和字母,且最少不能少于六位" /></td>
				</tr>
				<tr>
					<td>确认密码 : </td>
					<td><input type="password" id="pass" name="pass" required /></td>
				</tr>
				<tr>
					<td>姓名 : </td>
					<td><input type="text" id="name" name="name" required  /></td>
				</tr>
				<tr>
					<td>性别 : </td>
					<td>
						<input type="radio" name="radio" value="男" /> 男 
						<input type="radio" name="radio" value="女" /> 女
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" value="听歌" name="checkb" /> 听歌
						<input type="checkbox" value="看书" name="checkb" /> 看书
					</td>
				</tr>
				
				<tr>
					<td>出生日期:</td>
					<td>
						<input type="date" id="dateUser" /> 
					</td>
				</tr>
				<tr>
					<td><button >提交</button></td>
				</tr>
			</table>
		</form>
	</body>
</html>

js代码

		<script>

			function ons(){
				//获取用户名
				var username = document.getElementById("username").value;
				//获取密码
				var pass1 = document.getElementById("password").value;
				//获取确认的密码
				var pass2 = document.getElementById("pass").value;
				//获取姓名
				var name = document.getElementById("name").value;
				//获取性别数组
				var radArray = document.getElementsByName("radio");
				//获取爱好数组
				var checkArray = document.getElementsByName("checkb");
				//获取日期
				var dateUser = document.getElementById("dateUser").value;
				//正则表达式判断用户名格式是否正确
				if(!regular(username,/[a-zA-Z][a-zA-Z0-9]*/)){
					alert("请输入正确格式的账号(至少含有一位字母)");
					return false;
				}
				
				//正则表达式判断密码格式是否正确
				if(!regular(pass1,/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/)){
					alert("请输入正确格式的密码(必须要有数字和字母,且最少不能少于六位)");
					return false;
				}
				//判断第二次输入的密码是否与第一次输入的相同
				if(!(pass1==pass2)){
					alert("两次输入的密码不相同");
					return false;
				}
				//获取性别
				var rad;
				//判断选择的性别
				for (let i=0; i<radArray.length; i++) {
					let flag = radArray[i].checked;
					if(flag){
						rad = radArray[i].value;
					}
				}
				//判断是否选择了性别
				if(rad == undefined){
					alert("必须选择性别");
					return false;
				}
				
				//获取爱好
				var check="";
				var checkedArr = new Array();
				//将多个选中的爱好拼接
				for (let i=0,j=0; i<checkArray.length; i++) {
					let flag = checkArray[i].checked;
					if(flag){
						checkedArr[j++] = checkArray[i];
					}
				}
				//将爱好的内容拼接
				for (let i=0; i<checkedArr.length; i++) {
					if(i == checkedArr.length-1){
						check += checkedArr[i].value;
					}else{
						check += checkedArr[i].value +",";
					}
				}
				//判断是否选择了爱好
				if(check == ""){
					alert("至少选择一项爱好");
					return false;
				}
				
				console.log(check);
				if(dateUser == ""){
					alert("请选择出生日期");
					return false;
				}
				
				alert("提交的数据为:\n用户名:" + username + "\n密码:" + pass1 
					+ "\n姓名:" + name + "\n性别:" + rad + "\n爱好:" + check
					+ "\n出生日期:" + dateUser
				)
				
				return true;
				//正则判断
				function regular(str,reg){
//					let reg1 = new RegExp(reg);
					let reg1 = reg;
					return reg1.test(str);
				}
		}
		</script>

效果图
在这里插入图片描述

java.小小白

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
js表单提交数据并进行验证

表单提交数据并进行验证模拟注册填写信息html页面<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表单提交</title> <style> input[type="text"],input[type="password"]{ width: 250px; } </style> </head&g
复制链接

扫一扫