<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <title>表单验证</title> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function check() { var email = $("email").value; var password = $("password").value; var repassword = $("repassword").value; var name = $("name").value; var phone = $("phone").value; $("emailinfo").innerHTML = ""; $("passwordinfo").innerHTML = ""; $("repasswordinfo").innerHTML = ""; $("nameinfo").innerHTML = ""; $("phoneinfo").innerHTML = ""; //邮箱验证 if(email == "") { $("emailinfo").innerHTML = "Email值不能为空"; return false; } if(email.search(/^/\D/g/) == -1) { $("emailinfo").innerHTML = "邮箱格式不正确"; return false; } //密码验证 if(password == "") { $("passwordinfo").innerHTML = "密码不能为空"; return false; } if(password.length < 6) { $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; return false; } //确认密码验证 if(repassword != password) { $("repasswordinfo").innerHTML = "两次输入的密码不一致"; return false; } //姓名验证 if(name == "") { $("nameinfo").innerHTML = "姓名不能为空"; return false; } if (name.search(/^(?=.*\d.*\b)/) != -1){ $("errorinfo").innerHTML = "姓名不能有数字"; return false; } //手机号验证 if(phone == ""){ $("phoneinfo").innerHTML = "手机号不能为空"; return false; } if (phone.search(/^(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/) == -1){ $("phoneinfo").innerHTML = "手机号格式错误"; return false; } } </script> </head> <body> <form name="login_form" method="post"> <div> Email:<input type="text" name="email" id="email"/> <span id="emailinfo"></span> </div> <div> 密码:<input type="password" name="password" id="password"/> <span id="passwordinfo"></span> </div> <div> 重输密码:<input type="password" name="repassword" id="repassword"/> <span id="repasswordinfo"></span> </div> <div> 姓名:<input type="text" name="name" id="name"/> <span id="nameinfo"></span> </div> <div> 手机号:<input type="text" name="phone" id="phone"/> <span id="phoneinfo"></span> </div> <div> <button type="button" onclick="return check()"/>注册</button> </div> </form> </body> </html>