欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS简单表单验证

程序员文章站 2022-05-31 13:44:04
...

先上简略的效果图:

JS简单表单验证
我只是简单的判断如果文本框为空,就弹出不能为空的警告框;
如果你们判断条件很多,可以多加一点~

拷代码环节:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS表单验证</title>
	</head>
	<body>
		<div class="big">
			<form action="" method="get">
				<table>
					<tr>
						<td>会员名:</td>
						<td><input type="text" id="vipName"/><br /></td>
					</tr>
					<tr>
						<td>性别:</td>
						<td><input type="radio" id="m" name="sex" checked="checked"/><br /></td>
						<td><input type="radio" id="w" name="sex"/><br /></td>
					</tr>
					<tr>
						<td>密码:</td>
						<td><input type="password"  id="password" /><br /></td>
					</tr>
					<tr>
						<td>电子邮件地址:</td>
						<td><input type="email"  id="e" /><br /></td>
					</tr>
					<tr>
						<td>年龄:</td>
						<td><input type="text"  id="nl" /><br /></td>
					</tr>
					<tr>
						<td>密码:</td>
						<td><input type="password"  id="password" /><br /></td>
					</tr>
					<tr>
						<td></td>
						<td ><button onclick="button_Register()">注册</button></td>
					</tr>
				</table>
			</form>
		</div>
	</body>
	<script type="text/javascript">
		function button_Register(){
			var name = document.getElementById("vipName").value;
			var man = document.getElementById("m").value;
			var woman = document.getElementById("w").value;
			var pwd = document.getElementById("password").value;
			var email = document.getElementById("e").value;
			var age = document.getElementById("nl").value;
//			window.alert(name);
			if(name==""){
				alert("用户名不能为空!");
			}else if(man==""&&woman==""){
				alert("性别不能为空!");
			}else if(pwd==""){
				alert("密码不能为空!");
			}else if(pwd.length<6){
				alert("密码不能小于6位数!");
			}else if(email==""){
				alert("邮箱不能为空!");
			}else if(age==""){
				alert("年龄不能为空!");
			}else{
				alert("信息输入正确");
			}
		}
	</script>
</html>

我是与其终,一个风起云涌的女孩子。
很高兴你能看到我的博客,希望能对你有所帮助。

JS简单表单验证