JS笔记——表单验证

最新推荐文章于 2022-03-21 21:34:07 发布

雪心玉竹

最新推荐文章于 2022-03-21 21:34:07 发布

阅读量358

点赞数 1

分类专栏： JavaScript 文章标签： javascript html 表单

本文链接：https://blog.csdn.net/rongxiang111/article/details/52995000

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

用JS+HTML的知识实现简单的表单验证

HTML页面显示：

1.body内代码

<body>
<form action="" method="get" οnsubmit="formTest()" id="froms">
<table align="center" border="1" bgcolor="#00FFFF">
	<tr><td>用  户  名</td><td><input type="text" id="username"/></td></tr>
    <tr><td>密      码</td><td><input type="password" id="pwd"/></td></tr>
    <tr><td>确认密码</td><td><input type="password" id="pwd2"/></td></tr>
    <tr><td>年      龄</td><td><input type="text" id="age"/></td></tr>
    <tr><td colspan="2" align="center"><input type="submit" value="提交"/><input type="reset" value="取消"/></td></tr>
</table>
</form>
</body>

其中form里的οnsubmit="formTest()"，onsubmit方法进行函数事件的监听。

2.JS部分

<script>
	function formTest(){
		var test;
		test=document.getElementById("username").value;
		if(test==""||test==null){
			alert("用户名不能为空！");	
			return false;
		}
		test=document.getElementById("pwd").value;
		if(test.length<6){
				alert("密码不能为空且密码不能少于六位！");
				return false;
		}
		test1=document.getElementById("pwd2").value;
		if(test!=test1){
			alert("确认密码与首次输入的密码不一致！");
			return false;
		}
		test=document.getElementById("age").value;
		if(test.length>0){
			if(isNaN(test)){
				alert("年龄不能是数字以外的内容！请正确输入年龄！");
				return false;
			}	
		}
	}
</script>

雪心玉竹

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS笔记——表单验证

用JS+HTML的知识实现简单的表单验证HTML页面显示：1.body内代码：用户名密码确认密码年龄其中form里的onsubmit="formTest()"，onsubmit方法进行函数事件的监听。2.JS部分 function formTest(){ var test;
复制链接

扫一扫

专栏目录