JavaScript实现输入验证

最新推荐文章于 2024-07-04 16:37:43 发布

爱吃鸡爪zi

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量949

点赞数 26

分类专栏：前端基础学习方向文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_74197037/article/details/134618299

版权

前端基础同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

学习方向

3 篇文章 0 订阅

订阅专栏

填写注册信息，进行验证（课堂作业（附代码））-----关注爪子！大学课堂作业不迷路！

看了代码之后部分地方（背景颜色，字体大小，div和margin位置稍作调整，上次谁直接拿过去被老师发现了！！！可恶，盒盒盒盒盒盒）！

进入正题，对输入框的信息验证：

包括用户名，面貌，确认密码，性别，邮箱地址（我感觉这个邮箱地址其实没有必要的，因为本来input的type设置为“email”就能自行检测的），基本信息（这个你们自己练手）！

下面我直接复制代码给你们，然后这个验证呢，也是使用的js的方法，也就是代用函数和document的对象来获取你要得input的框的内容，然后就是一些HTML的基础属性的检查，以此来判断。

喜欢爪子的就多关注啦！！！

话不多说，直接看题目（因为某些原因，我就稍微改了一下我提交的内容，但是题目要求没变！！方便大家借鉴。0！0）

话不多说，看代码！！！

<!DOCTYPE html>
<html>
<head>
	<title>填写注册信息</title>
	<style type="text/css">
		body {
			text-align: center;
		}
		table {
			margin: auto;
			border-collapse: collapse;
			width: 50%;
			background-color: #f2f2f2;
		}
		th, td {
			padding: 8px;
			text-align: left;
			border-bottom: 1px solid #ddd;
			font-weight: normal;
		}
		th {
			background-color: #4CAF50;
			color: white;
			font-weight: bold;
		}
		input[type=text], input[type=password], input[type=email] {
			padding: 6px;
			border: none;
			border-radius: 4px;
			box-sizing: border-box;
			width: 100%;
			font-size: 16px;
			margin-bottom: 10px;
			resize: vertical;
			display: block;
			background-color: #f9f9f9;
			border: 1px solid #ccc;
			box-shadow: inset 0 1px 3px #ddd;
			outline: none;
		}
		input[type=radio] {
			margin-right: 10px;
		}
		label {
			margin-right: 20px;
		}
		textarea {
			padding: 6px;
			border: none;
			border-radius: 4px;
			box-sizing: border-box;
			width: 100%;
			font-size: 16px;
			margin-bottom: 10px;
			resize: vertical;
			display: block;
			background-color: #f9f9f9;
			border: 1px solid #ccc;
			box-shadow: inset 0 1px 3px #ddd;
			outline: none;
		}
		.btn {
			background-color: #4CAF50;
			color: white;
			padding: 8px 16px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 16px;
			margin-left: 130px;
		}
		.btn:hover {
			background-color: #3e8e41;
		}
		.thead{
			text-align: center;
		}
		
	</style>
</head>
<body>
<div>
	<form action="" method="get" id="myForm">
	<table>
		<tr>
			<th colspan="2" class="thead">填写注册信息</th>
		</tr>
		<tr>
			<td>用户名：</td>
			<td><input type="text" name="username" id="input_name"></td>
		</tr>
		<tr>
			<td>密码：</td>
			<td><input type="password" name="password" id="input_password"></td>
		</tr>
		<tr>
			<td>确认密码：</td>
			<td><input type="password" name="confirm_password" id="input_confirm_password"></td>
		</tr>
		<tr>
			<td>性别：</td>
			<td>
				<label><input type="radio" name="gender" value="male" id="input_gender_male">男</label>
				<label><input type="radio" name="gender" value="female" id="input_gender_female" >女</label>
			</td>
		</tr>
		<tr>
			<td>邮箱地址：</td>
			<td><input type="email" name="email" id="input_email"></td>
		</tr>
		<tr>
			<td>基本信息：</td>
			<td><textarea rows="5"></textarea></td>
		</tr>
		<tr>
			<td><input type="checkbox" id="checkbox_conform">我已经自习阅读并同意接受用户协议</td>
		</tr>
		<tr>
			<td><button class="btn" id="submit" onclick="submitAlert()">提交</button></td>     
			<td><input type="reset" class="btn" value="取消"></td>
		</tr>
		<tr>
            <td><button id="check_username" onclick="check_username()">检查用户名</button></td>
			<td><button id="check_password" onclick="">检查密码</button></td>
			
        </tr>
		<tr>
			<td><button id="check_confirm_password" onclick="checkConfirmPassword()">检查确认密码</button></td>
			<td><button id="check_gender" onclick="checkGender()">检查性别</button></td>
		</tr>
		<tr>
			<td><button id="check_email" onclick="">检查邮箱地址</button></td>
			
		</tr>
	</table>
	
</form>
    
</div>
</body>
	<script>
		// 用户名
		 document.getElementById("check_username").addEventListener("click", function() {
        var username = document.getElementById("input_name").value;
        var regex = /^[a-zA-Z][a-zA-Z0-9_]*$/;

        if (!regex.test(username)) {
            alert("用户名不满足正则表达式，输出有误");
        } else {
            alert("用户名输入信息检测通过");
        }
    });
	//密码
    document.getElementById("check_password").addEventListener("click", function() {
    var password = document.getElementById("input_password").value;
    var regex = /^[0-9]{6,}$/;

    if (!regex.test(password)) {
        alert("密码不满足要求，应为至少6位纯数字");
    } else {
        alert("密码输入正确");
    }
	});
	//确认密码
	function checkConfirmPassword() {
    var password = document.getElementById("input_password").value;
    var confirm_password = document.getElementById("input_confirm_password").value;

    if (password !== confirm_password) {
        alert("两次输入的密码不一致");
    } else {
        alert("两次输入的密码一致");
    }
}

	//性别
	function checkGender() {
    var gender_male = document.getElementById("input_gender_male");
    var gender_female = document.getElementById("input_gender_female");

    if (gender_male.checked) {
        alert("您选择的是男");
    } else if (gender_female.checked) {
        alert("您选择的是女");
    } else {
        alert("请选择性别");
    }
}

	//邮箱,,,,,不用吧
	document.getElementById("check_email").addEventListener("click", function() {
    var email = document.getElementById("input_email").value;
    var regex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;

    if (!regex.test(email)) {
        alert("邮箱地址输入不正确");
    } else {
        alert("邮箱地址输入正确");
    }
	});

	function submitAlert(){
		confirm("确认提交吗？");
		if(confirm){
			var endSure = document.getElementById("checkbox_conform");
			if(endSure.checked){
				document.getElementById("myForm").submit();
			}else{
				alert("请勾选协议！")
			}
			
		}
		
	}
	</script>
</html>

效果图如下：