JS校验与最终登陆界面功能完整示例
本文实例讲述了JS校验与最终登陆界面功能。分享给大家供大家参考,具体如下:
注册页面 //校验用户名 functioncheckUname(){ //获取用户名对象 varuname=document.getElementById("uname").value; //创建校验正则表达式判断条件 varreg=/^[\u4e00-\u9fa5]{2,4}$/;//其中前面的一部分是汉字的正则表达式,后面的是汉字的合法范围,(第一次因为,正则表达式写错了) //获取后面的提示字 varnameSpan=document.getElementById("nameSpan");//span是一个没有特殊含义的自定义标签用来辅助设计 //进行校验 if(uname==""||uname==null){ nameSpan.innerHTML="用户名不能为空"; nameSpan.style.color="red"; returnfalse; }elseif(reg.test(uname)){ nameSpan.innerHTML="用户名合法"; nameSpan.style.color="green"; returntrue; }else{ nameSpan.innerHTML="用户名不合法"; nameSpan.style.color="red"; returnfalse; } } functioncheckPassword(){ //获取用户名对象 varpassword1=document.getElementById("pws1").value;//我们是通过对象的value值(文本输入框的内容)进行判断的 //创建校验正则表达式判断条件 varreg=/^[a-z]\w{4,8}$/;//首位为字母,后面为数字4到8位() //获取后面的提示字 varpwsSpan=document.getElementById("passwordSpan");//span是一个没有特殊含义的自定义标签用来辅助设计 //进行校验 if(password1==""||password1==null){ pwsSpan.innerHTML="*密码不能为空"; pwsSpan.style.color="red"; returnfalse; }elseif(reg.test(password1)){ pwsSpan.innerHTML="*密码合法"; pwsSpan.style.color="green"; returntrue; }else{ pwsSpan.innerHTML="*密码不合法"; pwsSpan.style.color="red"; returnfalse; } //returnpassword1.value; checkPassworded();//在失去焦点的时候(调用该函数时,也进行确认密码的校验),如果没有这个操作,当重新修改用户密码时,其不会在进行确认密码(即修改密码后即使不相同也不会报错) } //校验确定密码 functioncheckPassworded(){ //获取确认密码对象 varpassword2=document.getElementById("pws2").value; //获取第一次密码对象,以进行比较 varpassword1=document.getElementById("pws1").value; //获取提示语的对象 varpwslSpan=document.getElementById("passwordlSpan"); //reg=checkPassword(); //if(reg=""||reg=null)//没能实现 if(password2==""||password2==null){//null就是字符串类型,表示空字符串 pwslSpan.innerHTML="*确认密码不能为空"; pwslSpan.style.color="red"; returnfalse; }elseif(password1==password2){ pwslSpan.innerHTML="*两次密码相同"; pwslSpan.style.color="green"; returntrue; }else{ pwslSpan.innerHTML="*两次密码不相同"; pwslSpan.style.color="red"; returnfalse; } } //-------------------------------------------------------------------------------------------------------- //考虑到有很多的校验方法都用到相同的方法和结构,所以我们在此对其进行封装 functioncheckAll(id,reg){//封装的基本思想:相同的直接写入,不同的利用参数转换 //接收传递的对象 varinp=document.getElementById(id);//我们传的参数是带双引号的 varie=inp.value;//我们通过对象的值进行判断 varalt=inp.alt;//通过对象来获得其对应的一些值 //接收传递的提示框对象 varspan=document.getElementById(id+"Span"); if(ie==""||ie==null){ span.innerHTML=alt+"不能为空"; span.style.color="red"; returnfalse; }elseif(reg.test(ie)){ span.innerHTML=alt+"合法"; span.style.color="green"; returntrue; }else{ span.innerHTML=alt+"不合法"; span.style.color="red"; returnfalse; } } //手机号的校验 functioncheckPhone(){ returncheckAll("phone",/^1[3,4,5,7,8]\d{9}$/); } //邮箱的校验 functioncheckMail(){ returncheckAll("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/); } //添加验证码 functioncheckCode(){ //获取验证码填写对象 varcode=document.getElementById("code1"); //获取验证显示对象 varcodeSpan=document.getElementById("codeSpan"); vartag=Math.floor(Math.random()*9000+1000);//产生四位的整数,Math.floor表示向下取整, codeSpan.innerHTML=tag; } //校验验证码 functioncheckCoded(){ //获取输入的验证码对象 varcode2=document.getElementById("code1").value; //获取显示的验证码对象,以进行比较 varcodeSpan1=document.getElementById("codeSpan"); varcode1=codeSpan1.innerHTML;//通过对象利用其innerHTML属性进行获得,其利用value不正确,没进一步探索 //获取提示语的对象 varcodeSpan2=document.getElementById("codeSpan2"); //alert(code1);//得到的值是undefined //alert(code2); if(code2==""||code2==null){ codeSpan2.innerHTML="*验证码不能为空"; codeSpan2.style.color="red"; returnfalse; }elseif(code1==code2){ codeSpan2.innerHTML="*验证码相同"; codeSpan2.style.color="green"; returntrue; }else{ codeSpan2.innerHTML="*验证码不相同"; codeSpan2.style.color="red"; returnfalse; } } //校验选择框 functioncheckSelect(){ //获取选择框对象 varselect=document.getElementById("select").value; //获取选择框提示对象 varselectSpan=document.getElementById("selectSpan"); //selectSpan.style.fontSize="15px"; if(select==0){ selectSpan.innerHTML="地址选择不能为空"; selectSpan.style.color="red"; returnfalse; }else{ selectSpan.innerHTML=select; selectSpan.style.color="green"; returntrue; } } //检测多选框 functioncheckFav(){ //获取多选框对象 varfav=document.getElementsByName("fav"); //获取多选框提示对象 varfavSpan=document.getElementById("favSpan"); favSpan.style.fontSize="10px"; for(vari=0;i tr,td,table{ background-color:transparent; border0px; } span{ font-size:10px; } #codeSpan{ width:30px; height:25px; font-size:20px; color:black; background-size:100%,100%;/*后面三行是使背景图片占满整个区域*/ background-repeat:no-repeat; background-image:url(../img/0.jpg); } #selectSpan{ font-size:15px; } #showdiv{ width:30%; height:100%; background-image:url(../img/5.jpg); background-size:cover; background-repeat:no-repeat; margin-left:33%; } input,select,[type=checkbox],#bigText{ background-color:transparent;/*把一些边框背景变为透明的以显示背景*/ } 姓名 邮箱 手机号 密码 确认密码 性别 男 女 所在地 山东 北京 河南 爱好 动漫 游戏 打球 个人简介 验证码
是否同意我们的协议