javascript 209-01-14

最新推荐文章于 2024-11-06 17:36:10 发布

十里相思

最新推荐文章于 2024-11-06 17:36:10 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

分类专栏： java基础文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_43986060/article/details/86482394

java基础专栏收录该内容

22 篇文章

订阅专栏

本文介绍了两个使用JavaScript进行表单验证的示例。第一个示例验证用户名和密码，确保用户名包含字母、数字和下划线，且长度符合要求；密码长度至少为6个字符。第二个示例增加了对重复密码和出生日期的验证，包括检查两次输入的密码是否一致，以及出生年份和日期的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#1
在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function checkForm() {
				if(checkUsername() && checkPassword()) {
					return true;
				}
				return false;
			}

			function checkUsername() {
				var username = document.forms[0].username.value;
				if(username.length == 0) {
					alert('请输入用户名');
					return false;
				}
				if(username.length < 3) {
					alert('用户名长度不能小于3位');
					return false;
				}
				for(i = 0; i < username.length; i++) {
					var n = username[i];
					if(!(n >= 0 && n <= 9 || n >= 'a' && n <= 'z' || n == '_')) {
						alert('会员名包含非法字符，只能包括 a-z、0-9和下划线');
						return false;
					}
				}
				return true;
			}

			function checkPassword() {
				var password = document.forms[0].password.value;
				if(password.length == 0) {
					alert('未输入密码\n请输入密码');
					return false;
				}
				if(password.length < 6) {
					alert('密码长度不能小于6位');
					return false;
				}

				return true;
			}
		</script>
	</head>

	<body>
		<form onsubmit="return checkForm()">
			<table>
				<tr>
					<td>会员名：</td>
					<td><input type="text" name="username" /> (可包含 a-z、0-9和下划线 ) </td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="password" /> (至少包含6个字符) </td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="登 录" />
						<input type="reset" value="重 填" />
					</td>
				</tr>
			</table>
		</form>
	</body>

</html>

#2
在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function checkForm() {
				if(checkUsername() && checkPassword() && checkbir()) {
					return true;
				}
				return false;
			}

			function checkUsername() {
				var username = document.forms[0].username.value;
				if(username.length == 0) {
					alert('请输入用户名');
					return false;
				}
				if(username.length < 3) {
					alert('用户名长度不能小于3位');
					return false;
				}
				for(i = 0; i < username.length; i++) {
					var n = username[i];
					if(!(n >= 0 && n <= 9 || n >= 'a' && n <= 'z' || n >= 'A' && n <= 'Z')) {
						alert('用户名含有非法字符');
						return false;
					}
				}
				return true;
			}

			function checkPassword() {
				var password = document.forms[0].password.value;
				var password1 = document.forms[0].password1.value;
				if(password.length == 0) {
					alert('请输入密码');
					return false;
				}
				if(password.length < 6) {
					alert('用户名长度不能小于6位');
					return false;
				}
				if(password1.length == 0) {
					alert('请输再次入密码');
					return false;
				}

				//为什么不能使用!=（不等于）
				if(!(password1.indexOf(password) == password1.lastIndexOf(password) && password1.indexOf(password) != -1 && password.length == password1.length)) {
					alert('再次输入的密码与密码不同');
					return false;
				}
				return true;
			}

			function checkbir() {
				var year = document.forms[0].year.value;
				var date = document.forms[0].date.value;
				var da = parseFloat(document.forms[0].date.value);
				if(!(year.length != 0 && date.length != 0)) {
					alert('请输入出生日期');
					return false;
				}
				if(year.indexOf('20') != 0) {
					alert('年份必须是20开头');
					return false;
				}
				if(year.length != 4) {
					alert('年份必须是4位');
					return false;
				}
				//为什么不能使用!=（不等于）
				if(!(da >= 1 && da <= 31)) {
					alert('日期必须在1到31之间');
					return false;
				}
				return true;
			}
		</script>
	</head>

	<body>
		<form onsubmit="return checkForm()">
			<table>
				<tr>
					<td>登录名：</td>
					<td><input type="text" name="username" /> </td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="password" />(至少包含6个字符) </td>
				</tr>

				<tr>
					<td>再次输入密码：</td>
					<td><input type="password" name="password1" /></td>
				</tr>
				<tr>
					<td>出生日期：</td>
					<td><input type="text" name="year" size="6" placeholder="yyyy" />年
						<select>
							<option value="1">（选择月份）</option>
							<option value="1">1</option>
						</select> 月
						<input type="text" name="date" size="4" placeholder="dd" /> 日</td>
				</tr>
				<tr>
					<td><input type="reset" value="重填" /> </td>
					<td><input type="submit" value="同意以下服务条款，提交注册信息" /> </td>
				</tr>
			</table>
		</form>
	</body>

</html>