javascript表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> form{margin:50px auto;width:400px;border:1px solid #00f;padding:30px;} form table{margin:20px auto;} tr{line-height:30pt;} th{text-align:right;} td{text-align:left;} tr:last-child td{text-align:center;} .ok{color:green;} .error{color:red;} </style> </head> <body> <form id="frm" action="https://www.baidu.com" method="get"> <table> <caption>注册用户</caption> <tr> <th>用户名:</th> <td><input type="text" id="username" name="username" placeholder="请输入用户名(3-20位)"/></td> <td id="username_msg"></td> </tr> <tr> <th>密码:</th> <td><input type="password" id="userpass" placeholder="请输入密码(6-20位)"/></td> <td id="userpass_msg"></td> </tr> <tr> <th>重复密码:</th> <td><input type="password" id="repass" name="repass" placeholder="请再次输入密码"></td> <td id="repass_msg"></td> </tr> <tr> <th>电子邮件:</th> <td><input type="text" id="email" name="email" placeholder="请输入电子邮件"></td> <td id="email_msg"></td> </tr> <tr> <th>真实姓名:</th> <td><input type="text" id="realname" name="realname" placeholder="请输入姓名(必须中文)"></td> <td id="realname_msg"></td> </tr> <tr> <th>性别:</th> <td> <input type="radio" id="male" name="agendar" value="0">男</input> <input type="radio" id="female" name="agendar" value="1">女</input> </td> <td id="agendar_msg"></td> </tr> <tr> <th>出生日期:</th> <td><input type="text" id="birthday" name="birthday" placeholder="请输入生日(格式:1990-12-23)"></td> <td id="birthday_msg"></td> </tr> <tr> <th>验证码</th> <td> <span id="code">78DE</span> <input type="text" id="recode" name="recode" placeholder="请输入验证码"/> </td> <td id="recode_msg"></td> </tr> <tr> <td colspan="3"> <input type="submit" value="注册"/> <input type="reset" value="重置"/> </td> </tr> </table> </form> </body> <script> window.onload=function(){ document.getElementById("frm").onsubmit=checkValid; document.getElementById("username").onblur=checkUser; document.getElementById("email").onblur=checkEmail; //......其他绑定 }; //合法性检查 function checkValid() { if(!checkUser) return false //.......其他验证 if(!checkEmail())return false; }; //用户名合法性检查 function checkUser() { var username = document.getElementById("username").value; if(username == null || username.length < 3 || username.length >20){ //不合法 document.getElementById("username_msg").innerHTML = '用户名非法'; document.getElementById("username_msg").className = 'error'; return false }else{ //合法 document.getElementById("username_msg").innerHTML = 'OK'; document.getElementById("username_msg").className = "ok"; return false } } //校验电子邮件地址(格式上校验) function checkEmail(){ var email=document.getElementById("email").value; //写一个正则表达式 var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+\.([a-zA-Z]){2,3}$/; if(reg.test(email)){ //合法 document.getElementById("email_msg").innerHTML="OK"; document.getElementById("email_msg").className="ok"; return true; }else{ //不合法 document.getElementById("email_msg").innerHTML="格式不对"; document.getElementById("email_msg").className="error"; return false; } } </script> </html>
原网页链接:https://blog.csdn.net/weixin_43889484/article/details/103452879