1.3.8实践环节——表单验证（JavaWeb第一章练习题）

yosh'joy！！

已于 2023-10-22 19:21:19 修改

阅读量276

点赞数 2

分类专栏： # Java/JSP 文章标签：前端 jsp html

于 2023-10-17 11:30:23 首次发布

本文链接：https://blog.csdn.net/weixin_60415234/article/details/133879911

版权

Java/JSP 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

【问题描述】

制作用户注册页面practicel_ 3.html, 具体要求如下: ①有常用的登录账号、密码、确认密码、姓名、身份证号码(只考虑18位的身份证)、出生年月日、住址、邮编、E-mail 等输入区域(自己设定)。 ②自己设定验证规则，在提交时检验是否符合要求，弹出非法的输入，并将焦点返回要输入的控件对象。 ③根据出生年月日判断身份证号码是否合法(只考虑18位的身份证)。 ④其他验证:登录账号只能是字母或数字且以字母开头;密码要在8位以上且需要有字母和数字之外的字符;出生年月日的格式为yyyy-mm-dd;邮编为 6位数字; E-mail的基本格式验证。

【代码实现】

html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>用户注册</title>
	<script type="text/javascript">
		function checkForm() {
			var username = document.getElementById("username").value;
			var password = document.getElementById("password").value;
			var confirmPassword = document.getElementById("confirmPassword").value;
			var name = document.getElementById("name").value;
			var idCard = document.getElementById("idCard").value;
			var birthday = document.getElementById("birthday").value;
			var address = document.getElementById("address").value;
			var postcode = document.getElementById("postcode").value;
			var email = document.getElementById("email").value;

			if (username == "") {
				alert("请输入登录账号！");
				document.getElementById("username").focus();
				return false;
			}

			if (password == "") {
				alert("请输入密码！");
				document.getElementById("password").focus();
				return false;
			}

			if (confirmPassword == "") {
				alert("请确认密码！");
				document.getElementById("confirmPassword").focus();
				return false;
			}

			if (password != confirmPassword) {
				alert("两次输入的密码不一致！");
				document.getElementById("confirmPassword").focus();
				return false;
			}

			if (name == "") {
				alert("请输入姓名！");
				document.getElementById("name").focus();
				return false;
			}

			if (idCard == "") {
				alert("请输入身份证号码！");
				document.getElementById("idCard").focus();
				return false;
			}

			if (!/^\d{17}[\d|x]$/i.test(idCard)) {
				alert("身份证号码格式不正确！");
				document.getElementById("idCard").focus();
				return false;
			}

			if (birthday == "") {
				alert("请输入出生年月日！");
				document.getElementById("birthday").focus();
				return false;
			}

			if (address == "") {
				alert("请输入住址！");
				document.getElementById("address").focus();
				return false;
			}

			if (postcode == "") {
				alert("请输入邮编！");
				document.getElementById("postcode").focus();
				return false;
			}

			if (!/^\d{6}$/i.test(postcode)) {
				alert("邮编格式不正确！");
				document.getElementById("postcode").focus();
				return false;
			}

			if (email == "") {
				alert("请输入E-mail！");
				document.getElementById("email").focus();
				return false;
			}

			if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/i.test(email)) {
				alert("E-mail格式不正确！");
				document.getElementById("email").focus();
				return false;
			}

			return true;
		}
	</script>
</head>
<body>
	<h1>用户注册</h1>
	<form action="register.jsp" method="post" onsubmit="return checkForm();">
		<table>
			<tr>
				<td>登录账号：</td>
				<td><input type="text" id="username" name="username"></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" id="password" name="password"></td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td><input type="password" id="confirmPassword" name="confirmPassword"></td>
			</tr>
			<tr>
				<td>姓名：</td>
				<td><input type="text" id="name" name="name"></td>
			</tr>
			<tr>
				<td>身份证号码：</td>
				<td><input type="text" id="idCard" name="idCard"></td>
			</tr>
			<tr>
				<td>出生年月日：</td>
				<td><input type="date" id="birthday" name="birthday"></td>
			</tr>
			<tr>
				<td>住址：</td>
				<td><input type="text" id="address" name="address"></td>
			</tr>
			<tr>
				<td>邮编：</td>
				<td><input type="text" id="postcode" name="postcode"></td>
			</tr>
			<tr>
				<td>E-mail：</td>
				<td><input type="email" id="email" name="email"></td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="提交"></td>
			</tr>
		</table>
	</form>
</body>
</html>

③根据出生年月日判断身份证号码是否合法(只考虑18位的身份证)：

可以通过以下步骤来判断身份证号码是否合法：

首先判断身份证号码的长度是否为18位；
然后将身份证号码前17位分别乘以不同的系数，系数分别为：7、9、10、5、8、4、2、1、6、3、7、9、10、5、8、4、2；
将上述结果相加，然后除以11取余数，得到一个数字；
根据余数判断身份证号码的最后一位是否正确，具体规则如下：

余数为0：最后一位应该是1

余数为1：最后一位应该是0

余数为2：最后一位应该是X

余数为3：最后一位应该是9

余数为4：最后一位应该是8

余数为5：最后一位应该是7

余数为6：最后一位应该是6

余数为7：最后一位应该是5

余数为8：最后一位应该是4

余数为9：最后一位应该是3

余数为10：最后一位应该是2 如果最后一位与上述规则不符，则说明身份证号码不合法。

④其他验证：

登录账号只能是字母或数字且以字母开头：可以使用正则表达式来判断登录账号是否符合要求，具体正则表达式为：^[a-zA-Z][a-zA-Z0-9]*$
密码要在8位以上且需要有字母和数字之外的字符：

同样可以使用正则表达式来判断密码是否符合要求，具体正则表达式为：^(?=.[A-Za-z])(?=.\d)(?=.[@$!%#?&])[A-Za-z\d@$!%*#?&]{8,}$

出生年月日的格式为yyyy-mm-dd：

可以使用正则表达式来判断出生年月日是否符合要求，具体正则表达式为：^\d{4}-\d{2}-\d{2}$

邮编为6位数字：

同样可以使用正则表达式来判断邮编是否符合要求，具体正则表达式为：^\d{6}$

E-mail的基本格式验证：

可以使用正则表达式来判断E-mail是否符合要求，具体正则表达式为：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$

html
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html>  
<html>  
<head>  
    <title>用户注册页面</title>  
    <script type="text/javascript">  
        function validateForm() {  
            var username = document.forms["registrationForm"]["username"].value;  
            var password = document.forms["registrationForm"]["password"].value;  
            var confirmPassword = document.forms["registrationForm"]["confirmPassword"].value;  
            var name = document.forms["registrationForm"]["name"].value;  
            var idCard = document.forms["registrationForm"]["idCard"].value;  
            var birthdate = document.forms["registrationForm"]["birthdate"].value;  
            var address = document.forms["registrationForm"]["address"].value;  
            var postalCode = document.forms["registrationForm"]["postalCode"].value;  
            var email = document.forms["registrationForm"]["email"].value;  
  
            // Validate username  
            var usernameRegex = /^[a-zA-Z][a-zA-Z0-9]*$/;  
            if (!usernameRegex.test(username)) {  
                alert("用户名不合法");  
                return false;  
            }  
  
            // Validate password  
            var passwordRegex = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,}$/;  
            if (!passwordRegex.test(password)) {  
                alert("密码必须在8位以上，且需要包含字母、数字和特殊字符");  
                return false;  
            }  
  
            // Validate confirm password  
            if (password !== confirmPassword) {  
                alert("两次输入的密码不一致");  
                return false;  
            }  
  
            // Validate ID card  
            var idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;  
            if (!idCardRegex.test(idCard)) {  
                alert("身份证号码不合法");  
                return false;  
            }  
  
            // Validate birthdate  
            var birthdateRegex = /^\d{4}-\d{2}-\d{2}$/;  
            if (!birthdateRegex.test(birthdate)) {  
                alert("出生日期格式不正确");  
                return false;  
            }  
  
            // Validate postal code  
            var postalCodeRegex = /^\d{6}$/;  
            if (!postalCodeRegex.test(postalCode)) {  
                alert("邮政编码不合法");  
                return false;  
            }  
  
            // Validate email  
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;  
            if (!emailRegex.test(email)) {  
                alert("电子邮件格式不正确");  
                return false;  
            }  
        }  
    </script>  
</head>  
<body>  
    <form name="registrationForm" action="submit_registration.jsp" onsubmit="return validateForm()">  
        <label for="username">用户名:</label><br>  
        <input type="text" id="username" name="username"><br><br>  
        <label for="password">密码:</label><br>  
        <input type="password" id="password" name="password"><br><br>  
        <label for="confirmPassword">确认密码:</label><br>  
        <input type="password" id="confirmPassword" name="confirmPassword"><br><br>  
        <label for="name">姓名:</label><br>  
        <input type="text" id="name" name="name"><br><br>  
        <label for="idCard">身份证号码:</label><br>  
        <input type="text" id="idCard" name="idCard"><br><br>  
        <label for="birthdate">出生年月日:</label><br>  
        <input type="text" id="birthdate" name="birthdate"><br><br>  
        <label for="address">住址:</label><br>  
        <input type="text" id="address" name="address"><br><br>  
        <label for="postalCode">邮编:</label><

yosh'joy！！

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
1.3.8实践环节——表单验证（JavaWeb第一章练习题）

制作用户注册页面practicel_ 3.html, 具体要求如下: ①有常用的登录账号、密码、确认密码、姓名、身份证号码(只考虑18位的身份证)、出生年月日、住址、邮编、E-mail 等输入区域(自己设定)。登录账号只能是字母或数字且以字母开头：可以使用正则表达式来判断登录账号是否符合要求，具体正则表达式为：^[a-zA-Z][a-zA-Z0-9]*$可以使用正则表达式来判断出生年月日是否符合要求，具体正则表达式为：^\d{4}-\d{2}-\d{2}$余数为6：最后一位应该是6。
复制链接

扫一扫

专栏目录