表单验证

来源：互联网发布：c语言whilet--的用法编辑：程序博客网时间：2024/06/07 05:44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <title> new document </title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="generator" content="editplus" />  <meta name="author" content="" />  <meta name="keywords" content="" />  <meta name="description" content="" />  <link rel ="stylesheet" type = "text/css" href = "" />  <style type = "text/css"></style>  <script type = "text/javascript">    //实例：表单验证function focus_username(){//获取id=result_username的元素对象var divObj = document.getElementById("result_username");//写入提示信息divObj.innerHTML="请输入你的用户名";divObj.style.color="#ccc";}function focus_userpwd(){//获取id=result_userpwd的元素对象var divObj = document.getElementById("result_userpwd");//写入提示信息divObj.innerHTML="请输入你的密码";divObj.style.color="#ccc";}function blur_username(){//获取id=result_username和name=username的元素对象；var divObj=document.getElementById("result_username");var inputObj = document.form1.username;//用户名验证if(inputObj.value==""){divObj.innerHTML="对不起，用户名不能为空!";divObj.style.color="red";return false;}else if(inputObj.value.length<5||inputObj.value.length>20){divObj.innerHTML="用户名长度必须介于5-20个字符之间!"divObj.style.color="red";return false;}else{divObj.innerHTML="<img src='ok.gif' />";return true;}}function blur_userpwd(){//获取id=result_userpwd和name=userpwd的元素对象；var divObj=document.getElementById("result_userpwd");var inputObj = document.form1.userpwd;//用户名验证if(inputObj.value==""){divObj.innerHTML="对不起，密码不能为空!";divObj.style.color="red";return false;}else if(inputObj.value.length<5||inputObj.value.length>20){divObj.innerHTML="密码长度必须介于5-20个字符之间!"divObj.style.color="red";return false;}else{divObj.innerHTML="<img src='ok.gif' />";return true;}}function checkForm(){var flag_username=blur_username();var flag_uesrpwd=blur_userpwd();if(flag_username && flag_userpwd){//提交表单return true;}else{//阻止表单提交return false;}}  </script> </head> <body>  <form name="form1" method="post" action="login.php" onsubmit="return checkForm()">  <table width="500" align="center" border="1" rules="all" cellpadding="5"><tr bgcolor="#f0f0f0"><th colspan="3">用户登录</th></tr><tr><td width="80" align="right">用户名</td><td><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" /></td><td width="300"><div id="result_username"></div></td></tr><tr><td width="80" align="right">密码</td><td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()" /></td><td><div id="result_userpwd"></div></td></tr><tr><td> </td><td colspan="2"><input type="submit" value="提交表单"></td></tr>  </table>  </form> </body></html>
阅读全文
0 0