HTML表单绑定验证功能

HTML表单绑定验证功能

javascript教程qingyu2021-06-02 21:58:0087A+A-

  HTML表单绑定验证功能

  网站最基础的模块就是注册,它是一个系统交互的基础。本例完成一个基础表单验证功能。

  实例过程:

  用户点击注册按钮,所以注册按钮要添加onclic事件属性。用regCheck()函数完成验证。账号密码不能为空,两次密码必须一致。

  实例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			<div>
				账号:<input type="text" name="username" id="userid">
			</div>
			<div>
				密码: <input type="password" name="password" id="userpwd">
			</div>
			<div>
				确认:<input type="password" name="newpwd" id="userpwd2">
			</div>
			<input type="submit" value="注册" onclick="return eg.regCheck();">
		</form>
		<script>
			var eg ={};
			eg.$ = function(id){
				return document.getElementById(id);
			}
			eg.regCheck = function(){
				var uid = eg.$("userid");
				var upwd =eg.$("userpwd");
				var upwd2 = eg.$("userpwd2");
				if(uid.value ==''){
					alert('账号不能为空!');
					return false;
				}
				if(upwd.value == ''){
					alert('密码不能为空!');
					return false;
				}
				if(upwd.value != upwd2.value){
					alert("两次密码不一致!");
					return false;
				}
			}
		</script>
	</body>
</html>


  运行结果:

HTML表单绑定验证功能

HTML表单绑定验证功能


另表单绑定的另一种方式

	<form action="" method="post" onsubmit="return eg.regCheck()">


点击这里复制本文地址 欲穷千里目,更上一层楼

支持Ctrl+Enter提交
qrcode

黄小鸡毕业设计网 © All Rights Reserved.  Copyright Your WebSite.Some Rights Reserved.闽ICP备18012015号-4
Powered by Z-BlogPHP
联系我们| 关于我们| 留言建议| 网站管理