表单验证--用户注册页面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box{border: 3px solid red ;width: 600px;margin: 0 auto;/*水平居中*/padding-left: 80px;/*内边距*/}h1{margin-left: 150px ;}/*label:first-child   获取第一个label元素label:行内元素* */p label:first-child{width: 100px;display: inline-block;/*内联块级元素*/}input{font-size: 20px;}</style><script type="text/javascript">//定义标记，定义成全局变量var nameFlag=pwdFlag=emailFlag=ageFlag=phoneFlag=false;function $(id){return document.getElementById(id);}function check(){//对标记进行判断if(nameFlag&&pwdFlag&&emailFlag&&ageFlag&&phoneFlag){alert("恭喜您，注册成功！");return true;}else{alert("注册失败！");return false;}}//封装一下代码/*focus()函数：让光标停留在文本框里面，用户下一次不用再次点击文本框了*/function afterCheck(obj,content,color,focus){//oname对象的下一个兄弟元素s1obj.nextElementSibling.innerHTML=content;obj.nextElementSibling.style.color=color;if(focus){obj.focus();}}window.onload= function(){//获取DOM对象var oname=$("name");var opwd1=$("pwd1");var opwd2=$("pwd2");var oage=$("age");var oemail=$("email");var ophone=$("phone");var os1=$('s1');var os2=$('s2');var os3=$('s3');var os4=$('s4');var os5=$('s5');var os6=$('s6');//定义正则表达式/*用户名:至少6位,以字母\下划线\$开头,后接数字*/var box_name=/^[a-zA-Z_$]\w{5}/;/*密码至少6位*/var box_pwd=/\w{6}/;/*年龄必须16~99岁*/var box_age=/^(1[6-9])|([2-9]\d)$/;/* 邮箱验证：1)以至少3位字母或数字开头2)之后必须有一位@3)@后必须有1位是小写的字母或数字4)之后必须有一位.符号5).符号后面由3位小写字母组成6)之后可能又有.与2位小写字母结束*/var box_email=/^\w{3,}@[a-z0-9]+\.[a-z]{3}(\.[a-z]{2})?$/;/*手机号:  以1开头，必须是11位数字。*/var box_phone=/^1\d{10}$/;//人性化提示oname.onblur=function(){//trim():去掉空格if(box_name.test(oname.value.trim())){afterCheck(this,"用户名输入正确","green",false);nameFlag=true;}else{afterCheck(this,"用户格式错误","red",true);}}opwd1.onblur=function(){//trim():去掉空格if(box_pwd.test(opwd1.value.trim())){  os2.innerHTML="密码输入正确";os2.style.color="green";}else{os2.innerHTML="密码格式错误";os2.style.color="red";}}opwd2.onblur=function(){//trim():去掉空格if(opwd1.value.trim()==opwd2.value.trim()){  os3.innerHTML="两次密码输入一致";os3.style.color="green";pwdFlag=true;}else{os3.innerHTML="两次密码输入不一致";os3.style.color="red";}}oage.onblur=function(){//trim():去掉空格if(box_age.test(oage.value.trim())){  os4.innerHTML="年龄输入正确";os4.style.color="green";ageFlag=true;}else{os4.innerHTML="年龄格式错误";os4.style.color="red";}}oemail.onblur=function(){//trim():去掉空格if(box_email.test(oemail.value.trim())){  os5.innerHTML="邮箱输入正确";os5.style.color="green";emailFlag=true;}else{os5.innerHTML="邮箱格式错误";os5.style.color="red";}}ophone.onblur=function(){//trim():去掉空格if(box_phone.test(ophone.value.trim())){  os6.innerHTML="手机号输入正确";os6.style.color="green";phoneFlag=true;}else{os6.innerHTML="手机号格式错误";os6.style.color="red";}}return true;}</script></head><body><div id="box" ><h1>用户注册</h1><!-- submit提交表单，对应的需要使用onsubmit事件       onsubmit一般都是在form标签上                会触发check()函数验证。         onsubmit需要接收check()函数的返回值 :true/false               true: 表单会提交                false:表单不提交              还需要在check()函数前面写return                 return true;        return false;   --> <form action="http://www.baidu.com" onsubmit="return check();"><!--用户名--><p><label for="name">用户名：</label><input type="text" id="name" /><span id="s1">请输入用户名</span></p><!--密码--><p><label for="pwd1">密码:</label><input type="password" id="pwd1" /><span id="s2"></span></p><p><label for="pwd2">确认密码:</label><input type="password" id="pwd2" /><span id="s3">两次密码输入一致</span></p><p><label>性别：</label><!--男--><input type="radio" id="sex_m" value="m" checked/><label for="sex_m">男</label><!--女--><input type="radio" id="sex_g" value="g"/><label for="sex_g">女</label></p><!--年龄--><p><label for="age">年龄：</label><input type="text" id="age"/><span id="s4">年龄必须在16-99之间</span></p><p><label>爱好：</label><!--游泳--><input type="checkbox" id="hobby_swim" value="swim" /><label for="hobby_swim">游泳</label><!--跳舞--><input type="checkbox"  id="hobby_dance" value="dance" /><label for="hobby_dace">跳舞</label><!--唱歌--><input type="checkbox" id="hobby_sing" value="sing" /><label for="hobby_sing">唱歌</label></p><!--邮箱--><p><label for="email">邮箱：</label><input  id="email" type="text"/><span id="s5">邮箱必须符合要求</span></p><!--手机--><p><label for="phone">手机：</label><input id="phone" type="text"/><span id="s6">手机号必须是11为数字</span></p><!--表单提交--><p><input type="submit"  value="提交" /></p></div></body>
</html>

表单验证--用户注册页面相关推荐

JQuery实现表单验证(注册页面)
注册页面功能实现: 验证会员名密码不能为空或者包含空格,并且保证长度至少6位验证邮箱符合规则,并且不能为空重复密码要与密码一致 1.页面的样式 <form action="#&qu ...
angularjs 表单验证和页面初始化闪烁
1.页面初始化闪烁因为angularjs需要先解析html页面的指令的,才可以启动指令功能.angularjs需要等待整个文档加载完成才会解析,所以会出现一些{{xxx}}, ng-show, ng ...
php提交注册表单,php用户注册表单验证
表单的验证 js 以及事件的注册初始化 openldap 的初始化状态 ,处理 Oracle SQL in 超过 1000 的解决方案从...= null) rsp.Close(); } } } ...
（30）-- 用户注册表单验证
# 用户注册表单验证 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
Jquery之AJAX用户注册表单验证(Vancl版)
Jquery用户注册表单验证(Vancl版),效果图实例下载:DEMO 转载于:https://www.cnblogs.com/xiaobaigang/archive/2009/12/30/1636 ...
关于表单验证中成功则跳转到指定页面否则不跳转的问题
关于表单验证中成功则跳转到指定页面否则不跳转的问题之前学习HTML的时候会涉及到一些JavaScript的基础知识,其中就有表单验证问题,当时很郁闷的是,不管表单验证是否通过,它都会跳转到指定页面. ...
前端学习（2684）：重读vue电商网站5之登录页面总结如何进行表单验证
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. 通过 rules 属性传入约定的验证规则将 ...
struts2 表单验证
表单验证有两种方式,代码验证和xml配置验证器验证.每种方法都可以设置全局验证和单个方法验证.感觉单个方法用的多一点. 例子:用户注册,进行验证.表单如下  ...

表单验证--用户注册页面

表单验证--用户注册页面相关推荐

最新文章

热门文章