使用JavaScript进行表单必填项目验证和改进
程序员文章站
2022-03-01 14:51:44
...
在网页提交表单的呃时候，往往需要进行表单的必填项进行验证，下面我们以两个例子来写一下对表单的必填项进行
认证的两个例子，第二个例子是对第一个例子进行的改进。
首先是最基本的最简单的表单必填项的实例代码
<!DOCTYPE html><html> <head> <title>确认表单必填项完整性</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function $(str){ return (document.getElementById(str)); } function check_submit(){ if($("username").value ==""){ alert("请填写用户名!"); return false; } if($("password").value == ""){ alert("请填写密码!"); return false; } } </script> </head> <body> <form action="" onsubmit="return check_submit();"> 用户名:<input id="username" type="text"><br/> 密 码:<input id="password" type="password"><br/> <input type="submit" value="提交"> </form> </body></html>下面是对表单的验证进行了改进
<!DOCTYPE html><html> <head> <title>更加人性化表单</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function $(str){ return (document.getElementById(str)); } function check_submit(){ if($("username").value =="" || $("username").value=="请输入用户名"){ alert("用户名不能为空!"); return false; } if($("password").value ==""){ alert("密码不能为空！"); return false; } } function mover(){ event.srcElement.focus(); event.srcElement.select(); } function mclick(){ if(event.srcElement.value=="请输入用户名") event.srcElement.value=""; } function mblur(){ if(event.srcElement.value=="") event.srcElement.value="请输入用户名"; } </script> </head> <body> <form action="" onsubmit="return check_submit();"> 用户名:<input id="username" type="text" onmouseover="mover();" onclick="mclick();" onblur="mblur();" value="请输入用户名"><br/> 密 码:<input id="password" type="password" onmouseover="mover();"><br/> <input type="submit" value="提交" id="submit"> </form> </body></html>当表单的用户名输入框鼠标划过的时候，触发事件，然后自动选中事件，当失去焦点的时候，检测里面的值是否为
空，如果为空就返回原来的值。应该说是比较大的改进。
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow
下一篇： javascript进行表单验证
推荐阅读
-
JavaScript 使用正则表达式进行表单验证的示例代码
-
如何使用JavaScript和正则表达式进行数据验证
-
如何使用JavaScript和正则表达式进行数据验证
-
javascript表单验证 - Parsley.js使用和配置_javascript技巧
-
JavaScript 使用正则表达式进行表单验证的示例代码
-
javascript表单验证 - Parsley.js使用和配置_javascript技巧
-
如何使用正则表达式和javascript对表单进行全面验证
-
如何使用JavaScript和正则表达式进行数据验证
-
如何使用JavaScript和正则表达式进行数据验证
-
用Javascript和PHP进行表单验证