![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表单验证</title> <script type="text/javascript"> function checkForm(){ //表单验证 //01.获取用户的输入 var userName= document.getElementById("userName"); //02.验证 if(userName.value==""||userName.value.length<6){ alert("用户名不能为空!用户名长度不足!"); return false; } return true; } </script> </head> <body> <form action="#" method="post" onsubmit="return checkForm()"> <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <input type="submit" value="提交"> </form> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
//表单验证 function checkForm(){ //01.验证用户名 var userName=getById("userName"); if(userName.value==""){ alert("用户名不能为空!") userName.focus(); //让文本框获取焦点 return false; } //02.验证密码 var pwd=getById("pwd"); if(pwd.value.length<6){ alert("密码不能小于6位!") pwd.focus(); //让文本框获取焦点 return false; } //03.验证密码和重复密码是否一致 var repwd=getById("repwd"); if(repwd.value!=pwd.value){ alert("两次密码不一致!") repwd.focus(); //让文本框获取焦点 return false; } //04.验证昵称 var nickName=getById("nickName"); if(nickName.value==""){ alert("昵称不能为空!") nickName.focus(); //让文本框获取焦点 return false; } //05.验证邮箱 var email=getById("email"); if(email.value.indexOf("@")==-1||email.value.indexOf(".")==-1){ alert("邮箱格式不正确!") email.focus(); //让文本框获取焦点 return false; } } // 传一个id 返回一个dom对象 function getById(obj){ return document.getElementById(obj); }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
/**value * Created by honglin.jiang on 2014/10/14. */ //获取DOM对象 function e(str){ return document.getElementById(str); } //动态添加有样式的内容 //ok_prompt 为提示文字验证正确的className //error_prompt 为提示文字验证错误时className //import_prompt 为提示文字提示时className function appendHtml(obj,str,className){ obj.innerHTML = str; obj.className = className; } //验证表单 function checkForm(){ //把所有的验证 写成一个数组 var ids=["checkUserName()","checkPwd()","checkRepwd()","checkNikeName()","checkTel()","checkEmail()"]; //定义变量 记录 返回true的方法 var num=0; for(var i=0;i<ids.length;i++){ if(eval(ids[i])){ num++; } } //所有的验证都通过 才是表单提交 return (ids.length==num)?true:false; } //获得鼠标时触发的事件 //import_prompt 为提示文字提示时className function focusShow(inputId,msg){ var dom =e(inputId); //获取dom对象 var dmsg =e(inputId+"Id"); //获取提示信息的dom对象 dmsg.style.borderColor="green"; appendHtml(dmsg,msg,"import_prompt"); } //验证用户名输入 function checkUserName(){ var flag=false; var userName= e("userName"); var userNameId= e("userNameId"); if(userName.value==""){ userName.style.borderColor="red"; appendHtml(userNameId,"用户名不能为空","error_prompt"); }else{ userName.style.borderColor="green"; appendHtml(userNameId,"输入正确","ok_prompt"); flag=true; } return flag; } //验证密码 function checkPwd(){ var flag=false; var pwd= e("pwd"); var pwdId= e("pwdId"); if(pwd.value==""){ pwd.style.borderColor="red"; appendHtml(pwdId,"密码不能为空","error_prompt"); }else{ pwd.style.borderColor="green"; appendHtml(pwdId,"输入正确","ok_prompt"); flag=true; } return flag; } //验证重复密码 function checkRepwd(){ var flag = true; var odom = e("repwd");//输入框DOM对象 var omsg = e("repwdId");//信息提示DOM对象 if(odom.value == ""){ odom.style.borderColor = "red"; appendHtml(omsg,"确认密码不能为空","error_prompt"); flag = false; }else if(odom.value != e("pwd").value){ odom.style.borderColor = "red"; appendHtml(omsg,"两次输入的密码不一致","error_prompt"); flag = false; } else{ odom.style.borderColor = "green"; appendHtml(omsg,"输入正确","ok_prompt"); flag = true; } return flag; } //验证昵称 function checkNikeName(){ var flag = true; var odom = e("nickName");//输入框DOM对象 var omsg = e("nickNameId");//信息提示DOM对象 if(odom.value == ""){ odom.style.borderColor = "red"; appendHtml(omsg,"昵称不能为空,请输入昵称","error_prompt"); flag = false; }else{ odom.style.borderColor = "green"; appendHtml(omsg,"输入正确","ok_prompt"); flag = true; } return flag; } //验证手机 function checkTel(){ var flag = true; var odom = e("tel");//输入框DOM对象 var omsg = e("telId");//信息提示DOM对象 if(odom.value == ""){ odom.style.borderColor = "red"; appendHtml(omsg,"关联手机号码不能为空,请输入关联手机号码","error_prompt"); flag = false; }else{ odom.style.borderColor = "green"; appendHtml(omsg,"输入正确","ok_prompt"); flag = true; } return flag; } //验证邮箱 function checkEmail(){ var flag = true; var odom = e("email");//输入框DOM对象 var omsg = e("emailId");//信息提示DOM对象 if(odom.value == ""){ odom.style.borderColor = "red"; appendHtml(omsg,"保密邮箱不能为空,请输入保密邮箱","error_prompt"); flag = false; }else if( odom.value.indexOf("@")==-1 || odom.value.indexOf(".")==-1 ){ odom.style.borderColor = "red"; appendHtml(omsg,"邮件格式必须包含@和.","error_prompt"); flag = false; }else{ odom.style.borderColor = "green"; appendHtml(omsg,"输入正确","ok_prompt"); flag = true; } return flag; }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>正则表达式</title> <script type="text/javascript"> function checkForm(){ var userName= document.getElementById("userName"); //书写正则表达式 用户名只能是字母或者数字并且在4到16个长度 包含4,16 var reg="^[a-zA-Z0-9]{4,16}$"; //var reg1="^[a-zA-Z0-9]?$"; var regExp=new RegExp(reg); alert( regExp.test(userName.value)?"用户名正确":"不匹配"); } </script> </head> <body> <form onsubmit="return checkForm()"> <input type="text" name="userName" id="userName"> <input type="submit" value="验证"> </form> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>正则验证邮箱</title> <script type="text/javascript"> function checkForm(){ var email= document.getElementById("email"); //书写正则表达式 邮箱 var reg=/^\w+@\w+(\.\w+){1,2}$/; var regExp=new RegExp(reg); alert( regExp.test(email.value)?"邮箱正确":"不匹配"); } </script> </head> <body> <form onsubmit="return checkForm()"> <input type="text" name="email" id="email"> <input type="submit" value="验证"> </form> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>正则验证手机号</title> <script type="text/javascript"> function checkForm(){ var phone= document.getElementById("phone"); //书写正则表达式 手机 var reg=/^(13|14|15|17|18)\d{9}$/; var regExp=new RegExp(reg); alert( regExp.test(phone.value)?"手机号正确":"不匹配"); } </script> </head> <body> <form onsubmit="return checkForm()"> <input type="text" name="phone" id="phone"> <input type="submit" value="验证"> </form> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>正则与String对象</title> <script type="text/javascript"> window.onload=function(){ var str="this is a big dog!"; //alert(str.match(/big/));查找 str 字符串中的 "big" 字符串 //alert(str.search(/i/));查找 str 字符串中的 "i" 字符串所在的位置 //alert(str.replace(/i/g,"I"));把str字符串中的 i 字符替换成 大写的 I 字符 //alert(str.replace("i","I")); //alert(str.split(" ")); 把str字符串中的按空格进行分割 返回数组 alert(str.split(/\s+/)); } </script> </head> <body> </body> </html>