JS笔记——表单验证

来源：互联网发布：在线php调试编辑：程序博客网时间：2024/06/06 20:20

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

HTML页面显示：

1.body内代码

<body><form action="" method="get" onsubmit="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里的onsubmit="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>

0 0