JS校验与最终登陆界面功能完整示例

2023-08-03 04:41:04 71

本文实例讲述了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;/*把一些边框背景变为透明的以显示背景*/
}







姓名






邮箱






手机号






密码






确认密码






性别

男女



所在地



山东
北京
河南





爱好

动漫
游戏
打球




个人简介





验证码

   








是否同意我们的协议

运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript表单(form)操作技巧大全》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

JS校验与最终登陆界面功能完整示例

热门推荐

随机推荐