前文：
html表单提交项的基本用法，用于个人查询使用
一、标签
二、html提交表单代码
<html> <head> <title>表单页面</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <script> function checkData(){ var canSub = true; //非空校验 canSub = checkNull("username","用户名不能为空！")&&canSub; canSub = checkNull("password","密码不能为空！")&&canSub; canSub = checkNull("password2","确认密码不能为空！")&&canSub; canSub = checkNull("nickname","昵称不能为空！")&&canSub; canSub = checkNull("email","邮箱不能为空！")&&canSub; canSub = checkNull("valistr","验证码不能为空！")&&canSub; //邮箱格式校验 //lishuai@tedu.com var reg = /^\w+@\w+(\.\w+)+$/; var email = document.getElementsByName("email")[0].value; var email_msg = document.getElementById("email_msg"); var f_email = reg.test(email); if(!f_email){ email_msg.innerText = "邮箱格式不正确！"; canSub = false; } //密码一致性校验 var password = document.getElementsByName("password")[0].value; var password2 = document.getElementsByName("password2")[0].value; var password2_msg = document.getElementById("password2_msg"); if(password != "" && password2 != "" &&password != password2){ password2_msg.innerText = "两次密码不一致"; canSub = false; } //性别非空校验（单选） var gender = document.getElementsByName("gender"); var gender_msg = document.getElementById("gender_msg"); gender_msg.innerText = ""; if(gender[0].checked == gender[1].checked){ gender_msg.innerText = "性别不能为空"; canSub = false; } //爱好非空校验（复选框） var hasLike = false; var likes = document.getElementsByName("like"); for(var i=0;i<likes.length;i++){ //如果其中任意一个复选框被选中，则不用提示 if(likes[i].checked == true){ hasLike = true; break; } } var like_msg = document.getElementById("like_msg"); like_msg.innerText = ""; if(!hasLike){ like_msg.innerText = "爱好不能为空！"; canSub = false; } //头像不能为空 var img = document.getElementsByName("img")[0].value; var img_msg = document.getElementById("img_msg"); img_msg.innerText = ""; if(img == ""){ img_msg.innerText = "头像不能为空！"; canSub = false; } return canSub; } function checkNull(name,msg){ var tag = document.getElementsByName(name)[0].value; var tag_msg = document.getElementById(name+"_msg"); tag_msg.innerText = ""; if(tag == ""){ tag_msg.innerText = msg; return false; } return true; } //textarea聚焦事件 function descFocus(thisobj){ if(thisobj.value == "请输入描述信息~！"){ thisobj.value = ""; } } //textarea离焦事件 function descBlur(thisobj){ if(thisobj.value == ""){ thisobj.value = "请输入描述信息~！"; } } </script> <style type="text/css"> span{ color:red; font-size:12px; } </style> </head> <body> <form action="http://localhost:8080" method="POST" onsubmit="return checkData()"> <table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink"> <caption><font color="red" size="6">注册表单</font></caption> <input type="hidden" name="id" value="9527"/> <tr> <td>用户名:</td> <td><input type="text" name="username" /> <span id="username_msg"></span></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="password"/> <span id="password_msg"></span></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="password2"/> <span id="password2_msg"></span></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="gender" value="男"/>男 <input type="radio" name="gender" value="女"/>女 <span id="gender_msg"></span> </td> </tr> <tr> <td>昵称：</td> <td><input type="text" name="nickname"/> <span id="nickname_msg"></span></td> </tr> <tr> <td>邮箱：</td> <td><input type="text" name="email"/> <span id="email_msg"></span></td> </tr> <tr> <td>爱好：</td> <td> <input type="checkbox" name="like" value="lq"/>篮球 <input type="checkbox" name="like" value="zq"/>足球 <input type="checkbox" name="like" value="qq"/>铅球 <input type="checkbox" name="like" value="blq"/>玻璃球 <span id="like_msg"></span> </td> </tr> <tr> <td>客户类型：</td> <td> <select name="type"> <option value="pm">平民</option> <option value="sxdy">少先队员</option> <option value="gqty">共青团员</option> <option value="ybdy">预备党员</option> <option value="zsdy">正式党员</option> </select> <span id="type_msg"></span> </td> </tr> <tr> <td>头像：</td> <td> <input type="file" name="img"/> <span id="img_msg"></span> </td> </tr> <tr> <td>描述信息：</td> <td> <textarea id="desc" rows="5" cols="45" name="desc" onfocus="descFocus(this)" onblur="descBlur(this)">请输入描述信息~！</textarea> <br/><span id="desc_msg"></span> </td> </tr> <tr> <td>验证码：</td> <td> <input type="text" name="valistr"/> <img src="1.jpg" width="100px" height="20px"/> <span id="valistr_msg"></span> </td> </tr> <tr> <td colspan="2" align="right"> <input type="submit" value="提 交"/> <input type="reset" value="重 置"/> </td> </tr> </table> </form> </body> </html>
