<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //检查用户名是否正确 function checkName() { //获取到输入框的颜色为白色 document.getElementById("username").style.backgroundColor = "white"; //获取到value值,并去空格,有变量接收 var username = document.getElementById("username").value.trim(); //定义正则,用户名为6-20位数字或字母 var regex = new RegExp("^\\w{6,20}$"); //判断用户输入的是否正确 if(regex.test(username)) { //用户输入正确就不用提示,并返回true; document.getElementById("usernameMsg").innerText = ""; return true; } else { //输入错误给出提示,并返回false document.getElementById("usernameMsg").innerText = "用户名格式不正确"; return false; } } //检查密码方法 function checkPWD() { //离开时背景颜色为白色 document.getElementById("pass").style.backgroundColor = "white"; //alert("aa") //获得用户输入值 var pwd = document.getElementById("pass").value.trim(); //定义正则 var regex = new RegExp("^\\d{6,8}$"); //判断正则是否正确 if(regex.test(pwd)) { //正确返回true document.getElementById("passwordMsg").innerText = ""; return true; } else { document.getElementById("passwordMsg").innerText = "密码格式不正确"; return false; } } /*确认密码*/ function checkrep() { document.getElementById("repass").style.backgroundColor = "white"; var repass = document.getElementById("repass").value.trim(); var pwd = document.getElementById("pass").value.trim(); if(repass == pwd) { document.getElementById("passMsg").innerText = ""; return true; } else { document.getElementById("passMsg").innerText = "密码两次输入不一样"; return false; } } //当用户点击正在输入框时,背景有变化(聚焦事件) function showColor(ele) { ele.style.backgroundColor = "lavenderblush "; } function checkBirth() { /*获取到用户输入的日期并转成Date()类,并取得年、月、日*/ var da = document.getElementById("birth").value; var hirthDate = new Date(da); hirYear = hirthDate.getFullYear() hirMonth = hirthDate.getMonth(); hirDay = hirthDate.getDate(); /*获取到当前日期,并取得年月日*/ var nowDate = new Date(); nowYear = nowDate.getFullYear(); nowMonth = nowDate.getMonth(); nowDay = nowDate.getDate(); //alert(nowYear-hirYear); if(nowYear - hirYear >= 12) { if(nowYear - hirYear == 12) { if(nowMonth - hirMonth >= 0) { if(nowDay - hirDay >= 0) { document.getElementById("birthInfo").innerText = ""; return true; } else { document.getElementById("birthInfo").innerText = "未满12岁禁止注册"; return false; } document.getElementById("birthInfo").innerText = ""; return true; } else { document.getElementById("birthInfo").innerText = "未满12岁禁止注册"; return false; } } else { document.getElementById("birthInfo").innerText = "未满12岁禁止注册"; return false; } } document.getElementById("birthInfo").innerText = "未满12岁禁止注册"; return false; } /*定义方法,校验邮箱是否正确*/ function checkEmail() { document.getElementById("email").style.backgroundColor = "white"; var email = document.getElementById("email").value.trim(); var regx = RegExp(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/); if(regx.test(email)) { document.getElementById("emailInfo").innerText = ""; return true; } else { document.getElementById("emailInfo").innerText = "邮箱格式不正确"; return false; } } /*定义方法,当所有校验都返回true后才能提交表单*/ function checkForm() { if(checkName() && checkPWD() && checkrep() && checkBirth()) { return true; } else { return false; } } </script> <style> .err { color: red; } #div1 { text-align: center; } #div2 { margin: 0 auto; width: 800px; height: 600px; border: 1px; position: relative; background-color: ivory; } #username, #pass, #repass, #birth, #email { width: 200px; margin: 0px; padding: 0px; } .in { height: 20px; } </style> </head> <body> <div id="div1"> <div id="div2"> <h2>用 户 注 册</h2><br /> <form method="post" action="suc.html" onsubmit=" return checkForm()"> <!--用户名--> <p> 用户名:<input class="in" name="username" required placeholder="6-20位数字或字母" id="username" onfocus="showColor(this)" onblur="checkName()" /> </p> <!--密码--> <p> 密 码:<input class="in" id="pass" type="password" name="username" required onblur="checkPWD()" onfocus="showColor(this)" placeholder="请输入密码" /> </p> <!--确认密码--> <p>确认密码:<input type="password" class="in" id="repass" name="repassword" required onblur="checkrep()" onfocus="showColor(this)" placeholder="请确认密码" /> </p> <!--选择出生日期--> <p> 出生日期:<input type="date" class="in" id="birth" onblur="checkBirth()" /> </p> <!--邮箱--> <p> 邮 箱:<input class="in" id="email" onfocus="showColor(this)" onblur="checkEmail()" placeholder="请输入邮箱地址" /> </p> <!--注册按钮--> <p><input type="submit" value="注册" /></p> </form> <span id="usernameMsg" class="err" style="position: absolute; top: 15%; left: 80%; font-size: 15px;"></span> <span id="passwordMsg" class="err" style="position: absolute; top: 21%; left: 80%; font-size: 15px;"></span> <span id="passMsg" class="err" style="position: absolute; top: 28%; left: 80%; font-size: 15px;"></span> <span id="birthInfo" class="err" style="position: absolute; top: 35%; left: 80%; font-size: 15px;"></span> <span id="emailInfo" class="err" style="position: absolute; top: 42%; left: 80%; font-size: 15px;"></span> </div> </div> </body> </html>
javascript写一个简单的表单校验
猜你喜欢
转载自blog.csdn.net/lzpzwy/article/details/80072776
今日推荐
周排行