JavaScript对输入的用户名密码等进行判断

最新推荐文章于 2024-07-13 17:56:15 发布

折り纸

最新推荐文章于 2024-07-13 17:56:15 发布

阅读量1.1w

点赞数 10

文章标签： java eclipse

本文链接：https://blog.csdn.net/weixin_53089473/article/details/124043342

版权

注册表实现以下功能

用户名：大于等于8，焦点离开是check
密码：大于等于8
密码确认：和密码一致焦点离开是check
电子邮件：格式正确焦点离开是check
生日：格式正确 9999/99/99
性别：默认是不选中
年纪：默认是不选中
可选项目兴趣介绍

保存是check

分了方便理解笔者吧check函数分开来写

1. 需要在文档出调用js函数

例如οnblur="check_username()“ 就是指在鼠标焦点离开时调用函数checkusername

2.var str = document.getElementById("username").value;

在js脚本中声明变量用不是java中的关键字，而是var

这条语句的意思是吧id为username的元素的值符给新建的变量str

3.函数中判断当获得字符串长度小于8 进入判断 alert是弹出警示框，后面双引号中的文字是弹出窗口中的文字
if ((str.length < 8))
{
alert("用户名必须为8位以上");
}

4.判断日期的正则表达式，是在网上搜索得到，相关的解释也在代码中注释

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/formtable.css">
<link rel="stylesheet" href="css/reg.css">
<title>注册</title>
<script>
	/*
    表单验证
	*/
	// 当鼠标不聚焦于用户名
	function check_username()
	{
		// 判断用户名是否合法
    	var str = document.getElementById("username").value;
    	if ((str.length < 8))
        {
            alert("用户名必须为8位以上");
        }
    	return str2;
	}   
	function check_password()
	{
		// 判断密码是否合法
    	var str = document.getElementById("password").value;
    	if ((str.length < 8))
        {
            alert("密码必须为8位以上");
        }
    	return str2;
	}   
	function check_password2()
	{
		// 判断确认密码是否合法
    	var str1 = document.getElementById("password").value;
    	var str2 = document.getElementById("password2").value;
    	if (str2 != str1)
        {
            alert("两次密码必须一致");
        }
    	return str1,str2;
	}   
	
	 function IsDate() {
         //我们将在这个方法里面进行日期格式的检测
         //正则表达式
         var reg = /^(\d{4})-(\d{2})-(\d{2})$/;
         //输入的日期
         var str = document.getElementById("birthday").value;
         //用正则表达匹配
         var arr = reg.exec(str);
         if (str == "") {
             alert("请输入日期");
         }
         else if (!reg.test(str) && RegExp.$2 <= 12 && RegExp.$3 <= 31) {
             alert("请保证输入的为yyyy-mm-dd日期格式");
         } else {
             alert("日期格式正确");
         }
     }
	

</script>
</head>

<body>
	<div class="border">
		<div class="reg">
			<form >
				<table border="0">
					<tr>
						<td>用户名：&nbsp&nbsp&nbsp&nbsp</td>
						<td><input type="text" name="username" id = "username"
							onblur="check_username()" ></td>
					</tr>

					<tr>
						<td>密码：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</td>
						<td><input type="text" name="password" id = "password" onblur="check_password()" ></td>
					</tr>

					<tr>
						<td>密码确认：</td>
						<td><input type="text" name="password-again"  id = "password2" onblur="check_password2()""></td>
					</tr>

					<tr>
						<td>电子邮件：</td>
						<td><input type="text" name="email"></td>
					</tr>

					<tr>
						<td>生日：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</td>
						<td><input type="text" name="birthday" id = "birthday" onblur="IsDate()"></td>
					</tr>

					<tr>
						<td>性别：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</td>
						<td>男<input type="radio" name="sex" value="man"> 女 <input
							type="radio" name="sex" value="woman">
						</td>
					</tr>

					<tr>
						<td>年级：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</td>
						<td><select style="width: 150px">
								<option>--请选择--</option>
								<option>---大一---</option>
								<option>---大二---</option>
								<option>---大三---</option>
								<option>---大四---</option>
						</select></td>
					</tr>

					<tr>
						<td>兴趣：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</td>
						<td><input type="checkbox" name="hobby" value="movie">电影
							<input type="checkbox" name="hobby" value="singing">唱歌 <input
							type="checkbox" name="hobby" value="reading">读书</td>
					</tr>

					<tr>
						<td>自我介绍：</td>
						<td><textarea rows="3" cols="30" maxlength="13"></textarea></td>
					</tr>
					<tr>
						<td colspan="2"><input type="submit" value="保存" ></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</body>

</html>