JS实现表单验证

来源：互联网发布：国外域名要不要备案编辑：程序博客网时间：2024/05/16 10:57

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script language="javascript">function checkname(uname){var us=document.getElementById("us");var name=trim(uname);if(name==null||name==""){us.innerHTML="<font color='red'>用户名不能为空</font>"return false;}else if(!/^[a-zA-Z]\w{0,9}$/.test(name)){us.innerHTML="<font color='red'>用户名开头必须为字母</font>"return false;}else{us.innerHTML="";return true;}}function checkpassword(pass){var p=document.getElementById("p");var name=document.getElementById("name");var password=trim(pass)if(password==null||password==""){p.innerHTML="<font color='red'>密码不能为空</font>";return false;}else if(password==name.value){p.innerHTML="<font color='red'>密码不能和用户名相同</font>";return false;}else if(!/^\w{6,10}$/.test(password)){p.innerHTML="<font color='red'>密码长度必须为6-10位</font>";return false;}else{p.innerHTML="";return true;}}function checkpass(pass2){var p2=document.getElementById("p2");var password=document.getElementById("password");var password2=trim(pass2)if(password2==null||password2==""){p2.innerHTML="<font color='red'>密码不能为空</font>";return false;}else if(password2!=password.value){p2.innerHTML="<font color='red'>两次输入的密码必须相同</font>";return false;}else if(!/^\w{6,10}$/.test(password2)){p2.innerHTML="<font color='red'>密码长度必须为6-10位</font>";return false;}else{p2.innerHTML="";return true;}}function checkemail(mail){var e=document.getElementById("e");var email=trim(mail)if(email==null||email==""){e.innerHTML="<font color='red'>电子邮箱不能为空</font>";return false;}else if(!/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/.test(email)){e.innerHTML="<font color='red'>请输入正确的电子邮箱</font>";return false;}else{e.innerHTML="";return true;}}function trim(s){  return s.replace(/^\s+|\s+$/g,"");//去除空格;}function checkdata(){var name=document.getElementById("name");var pass=document.getElementById("password");var pass2=document.getElementById("pass");var email=document.getElementById("email");if(!checkname(name.value)){return false;}if(!checkpassword(pass.value)){return false;}if(!checkpass(pass2.value)){return false;}if(!checkemail(email.value)){return false;}return true;}</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><center><form action="#" method="post"><table border="0" cellspacing="1" cellpadding="5"><tr><td>用户名</td><td><input type="text" id="name" onblur="checkname(this.value)" name="uname"/><span id="us"></span></td></tr><tr><td>密码</td><td><input  type="password" id="password" onblur="checkpassword(this.value)" name="pass"/><span id="p"></span></td></tr><tr><td>确认密码</td><td><input  type="password" id="pass" onblur="checkpass(this.value)" name="pass2"/><span  id="p2"></span></td></tr><tr><td>电子邮箱</td><td><input type="text" id="email" onblur="checkemail(this.value)" name="mail"/><span id="e"></span></td></tr></table><input type="submit" value="注册"  onclick="return checkdata()"/>       <input type="submit" value="取消"/></form></center></body></html>

对中文的验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script language="javascript">function checkname(uname){var s=document.getElementById("s");if(uname==""||uname==null){s.innerHTML="<font color='red'>用户名不能为空</font>";return false;}else if(!/^[\u4e00-\u9fa5]+$/.test(uname)){s.innerHTML="<font color='red'>用户名只能为中文</font>";return false;}else {return true;}}function data(){var user=document.getElementById("user")if(!checkname(user.value)){return false;}return true;}</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><form action="#" method="get" onsubmit="return data();"><table border="0" cellspacing="1"><tr><td><input type="text" name="uname" id="user" onblur="checkname(this.value)"/></td><td><span id="s"></span></td></tr></table><input type="submit" value="login"/></form></body></html>