标签：
表单
<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <style type="text/css"> *{padding:0;margin:0;} table{margin:20px auto;} </style> <script type="text/javascript" src="js/checkForm.js"></script> </head> <body> <form action="save.php" method="post" onsubmit="return checkForm();"> <table border=0 cellpadding=0 cellspacing=0 width=90% align="center"> <tr> <td height="60" colspan="2"> <h1>会员注册</h1> </td> </tr> <tr> <td class="c1">用户名：</td> <td><input onchange="checkUsername();" type="text" name="username"/></td> </tr> <tr> <td class="c1">密码：</td> <td><input onchange="checkPassword();" type="password" name="pw"/></td> </tr> <tr> <td class="c1">重复密码：</td> <td><input onchange="checkRePassword();" type="password" name="pw1"/></td> </tr> <tr> <td class="c1">邮箱：</td> <td><input onchange="checkEmail();" type="text" name="email"/></td> </tr> <tr> <td class="c1">性别：</td> <td> <input type="radio" name="sex" value="男"/>男<br/> <input type="radio" name="sex" value="女"/>女<br/> <input type="radio" name="sex" value="保密" checked="checked"/>保密 </td> </tr> <tr> <td class="c1">爱好：</td> <td> <input type="checkbox" name="like[]" value=‘1‘/>篮球<br/> <input type="checkbox" name="like[]" value=‘2‘/>足球<br/> <input type="checkbox" name="like[]" value=‘3‘/>羽毛球 </td> </tr> <tr> <td class="c1">电话：</td> <td><input onchange="checkTel()" type="text" name="tel"/></td> </tr> <tr> <td class="c1">简介：</td> <td> <textarea name="intro" cols="60" rows="6"></textarea> </td> </tr> <tr> <td colspan="2"><input type="submit" value="注册"/></td> </tr> </table> </form> </body> </html>
js表单验证
function checkUsername(){ //对username的内容进行验证。 //要求：首字符是字母或下划线，其他由下划线字母数字组成，共4-20位 var inputOb=document.getElementsByName(‘username‘)[0]; var v=inputOb.value; if(/^[_a-zA-Z]\w{3,19}$/.test(v)){ showMessage("用户名正确",‘username‘); return true; }else{ showMessage("用户名错误",‘username‘); return false; } } function checkPassword(){ //要求：数字字母_ 6-20 var v=document.getElementsByName(‘pw‘)[0].value; if(/^\w{6,20}$/.test(v)){ showMessage("密码正确",‘pw‘); return true; }else{ showMessage("密码错误",‘pw‘); return false; } } function checkRePassword(){ //两次输入密码是否一致 var v=document.getElementsByName(‘pw‘)[0].value; var v1=document.getElementsByName(‘pw1‘)[0].value; if(v==v1){ showMessage(‘两次密码一致‘,‘pw1‘); return true; }else{ showMessage(‘两次密码不一致‘,‘pw1‘); return false; } } function checkEmail(){ //得到email框的内容 var v=document.getElementsByName(‘email‘)[0].value; //验证，提示 if(/^\w+@\w+(\.\w+)+$/.test(v)){ showMessage(‘邮箱格式正确‘,‘email‘); return true; }else{ showMessage(‘邮箱格式错误‘,‘email‘); return false; } } function checkTel(){ //得到email框的内容 var v=document.getElementsByName(‘tel‘)[0].value; //验证，提示 if(/^1[34578]\d{9}$/.test(v)){ showMessage(‘电话格式正确‘,‘tel‘); return true; }else{ showMessage(‘电话格式错误‘,‘tel‘); return false; } } function checkForm(){ if(checkUsername()&&checkPassword()&&checkRePassword()&&checkEmail()&&checkTel()){ return true; }else{ return false; } } //信息提示 function showMessage(message,elementName){ //创建div var divOb=document.createElement(‘div‘); divOb.innerHTML=message; //获取elementName的右上角位置 var cOb=document.getElementsByName(elementName)[0]; var T=cOb.offsetTop; var L=cOb.offsetLeft+cOb.offsetWidth; //把td中的div全部去掉 var divList=cOb.parentNode.getElementsByTagName(‘div‘); for(var i=divList.length-1;i>=0;i--){ cOb.parentNode.removeChild(divList[i]); } cOb.parentNode.insertBefore(divOb,cOb); cOb.parentNode.style.position=‘relative‘; divOb.style.position=‘absolute‘; divOb.style.zIndex=1000; divOb.style.left=L+"px"; divOb.style.top=T+"px"; divOb.style.border="1px solid orange" divOb.style.padding=‘1px 3px‘; divOb.style.fontSize="12px"; }
标签：
原文地址：http://www.cnblogs.com/wangjinke/p/4784439.html
