JS表单验证
js表单验证
<html> <title></title> <head> <script language="javascript"> function cancel(){ document.getElementById("Form").reset(); } function check(){ //验证用户名 var username = document.getElementById("username"); if(username.value.length==0){ alert("用户名不能为空！"); username.focus(); return false; } if(username.value.length<6){ alert("用户名长度不能低于6位！"); username.value = ""; username.focus(); return false; } //验证密码，确认密码 var pass = document.getElementById("password"); var qrpass = document.getElementById("qrpassword"); if(pass.value.length==0){ alert("密码不能为空！"); pass.focus(); return false; } if(pass.value.length<6||pass.value.length>15){ alert("密码的长度为6-15位！"); pass.value = ""; pass.focus(); return false; }else if(pass.value!=qrpass.value){ alert("两次密码输入不一致！"); qrpass.value = ""; qrpass.focus(); return false; } //验证身份证号 var idcard = document.getElementById("idcard"); if(idcard.value.length==0){ alert("请输入你的身份证号码!"); idcard.focus(); return false; } var card = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/ if(!card.test(idcard.value)){ alert("你输入的身份证号码不正确，请重新输入！"); idcard.value=""; idcard.focus(); return false; } //验证性别 var sex = document.getElementsByName("sex"); var boo = true; for(var i = 0;i<sex.length;i++){ if(sex[i].checked==true){ boo = false; break; } } if(boo){ alert("请选择你的性别！"); return false; } //验证出生日期 var data = document.getElementById("birthday"); if(data.value.length==0){ alert("请输入您的出生日期！"); pass.focus(); return false; } //YYYY-MM-DD || YYYY/MM/DD 的日期格式 var a=/^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2})$/ if(!a.test(data.value)){ alert("日期格式不正确！\n\n请输入YYYY-MM-DD或者YYYY/MM/DD的格式！"); return false; } //验证籍贯 var slt=document.getElementById("region"); if(slt.value=="0"){ alert("请选择你的籍贯！"); return false; } //验证爱好 var flag = true; var aa = document.getElementsByName("hobby"); for(i = 0;i<aa.length;i++){ if(aa[i].checked==true){ flag = false; break; } } if(flag){ alert("请选择你的爱好！"); return false; } //验证邮箱 var objName = document.getElementById("email"); var pattern = /^[a-zA-Z0-9]{1,}@[a-zA-Z0-9]{1,10}[.](com|cn|net)$/; if(objName.value==0){ alert("请输入您的邮箱！"); objName.focus(); return false; } if(!pattern.test(objName.value)) { alert("邮箱格式不正确，请重新输入!"); objName.value=""; objName.focus(); return false; } //验证手机号码的 :pattern.test(tel.value)方式匹配 var tel = document.getElementById("tel"); var pattern= /^1[358]\d{9}$/ if(tel.value.length==0){ alert("请输入你的手机号码！"); tel.focus(); return false; } if(!pattern.test(tel.value)) { alert("你输入的手机号码无效，请重新输入！"); tel.value=""; tel.focus(); return false; } //验证手机号码的 :tel.value.match(pattern)方式匹配 var tel = document.getElementById("Order_txt_tel"); if(!tel.value.match(/^\d{3,4}-?\d{6,8}$/)){ alert("请填写正确的电话！"); tel.focus(); return false; } var mob = document.getElementById("Order_txt_mob"); if(!mob.value.match(/^1[3|4|5|7|8]\d{9}$/)){ alert("请填写正确的手机号！"); mob.focus(); return false; } //验证自我介绍 var intro = document.getElementById("intro"); if(intro.value.length==0){ alert("自我介绍不能为空！"); return false; }else if(intro.value.length<100){ alert("自我介绍字数不能低于100字！"); return false; } } function checknoAll(){ var all = document.getElementsByName("all"); var no = document.getElementsByName("no"); if(no[0].checked==true){ all[0].checked=false; var all = document.getElementsByName("hobby"); for(i = 0;i<all.length;i++){ if(all[i].checked==true){ all[i].checked=false; }else if(all[i].checked==false){ all[i].checked=true; } } } } function checkAll(){ var all = document.getElementsByName("all"); var no = document.getElementsByName("no"); if(all[0].checked==true){ no[0].checked=false; var all = document.getElementsByName("hobby"); for(i = 0;i<all.length;i++){ if(!all[i].checked==true){ all[i].checked=true; } } } } </script> </head> <body> <form action="" method="post" onsubmit="return check();" id="Form"> <table border="1" bordercolor="green" cellspacing="1" cellpadding="1" align="left" width="500"> <tr> <td colspan="2" align="center"><font size="5" color="green"><b>用户注册</b></font></td> </tr> <tr> <td align="right">用户名：</td> <td><input type="text" id="username" style="width: 150px; height: 20px" /></td> </tr> <tr> <td align="right">密 码：</td> <td><input type="password" id="password" style="width: 150px; height: 20px" /></td> </tr> <tr> <td align="right">确认密码：</td> <td><input type="password" id="qrpassword" style="width: 150px; height: 20px" onpaste="return false" /> <font color="red">警告：</font>禁止粘贴</td> </tr> <tr> <td align="right">身份证号：</td> <td><input type="text" id="idcard" style="width: 150px; height: 20px" /></td> </tr> <tr> <td align="right">性 别：</td> <td>男<input type="radio" id="sex" name="sex" value="boy" />女<input type="radio" name="sex" id="sex" value="girl" /></td> </tr> <tr> <td align="right">出生日期：</td> <td><input type="text" id="birthday" style="width: 150px; height: 20px" /> <font color="red">YYYY-MM-DD或者YYYY/MM/DD</font></td> </tr> <tr> <td align="right">籍 贯：</td> <td><select id="region"> <option value="0">--请选择籍贯--</option> <option value="1">河南省郑州市</option> <option value="2">河南省信阳市</option> <option value="3">北京市海淀区</option> <option value="4">辽宁省大连市</option> <option value="5">广东省深圳市</option> </select></td> </tr> <tr> <td align="right">爱 好：</td> <td><input type="checkbox" id="hobby" value="music" />音乐 <input type="checkbox" id="hobby" name=" hobby" value="basketball" />篮球 <input type="checkbox" id="hobby" name=" hobby" value="visitor" />旅游 <input type="checkbox" id="hobby" name=" hobby" value="sleep" />睡觉 <font color="red">*</font> <input type="checkbox" id="all" name=" all" onclick="checkAll()" />全选 <input type="checkbox" id="no" name=" bo" onclick="checknoAll()" />反选</td> </tr> <tr> <td align="right">邮 箱：</td> <td><input type="text" id="email" style="width: 150px; height: 20px" /></td> </tr> <tr> <td align="right">手机号码：</td> <td><input type="text" id="tel" style="width: 150px; height: 20px" /></td> </tr> <tr> <td align="right">自我介绍：</td> <td><textarea id="intro" style="width: 150px; height: 50px"></textarea></td> </tr> <tr> <td colspan="2" align="right"><input type="submit" value=" 提交注册信息 " /> <input type="reset" onclick="cancel()" value=" 全部清空 " /></td> </table> </form> </body> </html>
