JS——简单的正则表达式验证
<!-- 用户注册:结构层:html;表现层:css;行为层:javascript;
html利用ul,li来构造:
注意事项:1、每个Input都要有相应的id,这是在js中去调用的。
2、<a href="javascript:void(0)"></a>,添加javascript:void(0)是为了阻止链接的跳转。
行为层:js
js编写的主体思路:1、中心点:每一个input框,也就是获取的inp=document.getElementsByTagName("input");
2、针对input输入框会有点击即获得焦点的状态,和失去焦点的状态。
3、当获得焦点的时候,会给用户名、输入框、提示图标(改变背景图片的位置)变成蓝色,即添加point样式。
4、当input输入框失去焦点时,会给用户名、输入框、提示图标变成红色,即添加error样式。
5、当input输入框内容正确后,会给用户名、输入框变成-->。
zhuye
- <body>
- <div id="reg">
- <form>
- <div class="reg_title"><h1>用户注册</h1></div>
- <ul class="reg_con">
- <li>
- <ul class="def">
- <li><span>用户帐号:</span><input type="text" id="uname"/></li>
- <li><p><i></i>给自己起个名字吧,它将成为您登录本站的用户名</p></li>
- </ul>
- </li>
- <li>
- <ul class="def">
- <li><span>电子邮箱:</span><input type="text" id="email"/></li>
- <li><p><i></i>请输入您的常用邮箱地址,此邮箱地址将作为修改密码</p></li>
- </ul>
- </li>
- <li>
- <ul class="def">
- <li><span>手机号码:</span><input type="text" id="mobile"/></li>
- <li><p><i></i>请输入您的手机号码,方便我们之间的联系</p></li>
- </ul>
- </li>
- <li>
- <ul class="def">
- <li><span>安全密码:</span><input id="pwd" type="password"/></li>
- <li><p><i></i>请输入安全密码,它将作为您的登录密码</p></li>
- </ul>
- </li>
- <li>
- <ul class="def ">
- <li><span>确认密码:</span><input type="password" id="qrpwd"/></li>
- <li><p><i></i>请将上面的密码再输入一次</p></li>
- </ul>
- </li>
- <li>
- <ul>
- <li><span></span></li>
- <li id="reg_sub"><a href="javascript:void(0)" id="enter">立即注册</a></li>
- </ul>
- </li>
- </ul>
- </form>
- </div>
- </body>
css
- <style>
- html,body,h1,h2,h3,h4,h5,h6,div,ul,ol,li,dl,dt,dd,iframe,textarea,input,button,p,strong,b,a,span,del,pre,table,tr,th,td{margin:; padding:; -webkit-text-size-adjust:none;}
- h1,h2,h3,h4,h5,h6,em,del{font-style:normal; font-weight:normal; font-size:100%; -webkit-text-size-adjust:none;}
- label,input,textarea{outline:none;}
- ul{list-style:none;}
- a{text-decoration:none;}
- .cl{zoom:}
- .cl:after{
- display:block;
- visibility:hidden;
- content:"";
- clear:both;
- overflow:hidden;
- }
- body{
- background:#DEEBF4 url(http://www.w3cfuns.com/data/attachment/album/201405/21/173823uwzw6d5rgd2xwdd8.jpg) no-repeat top center ;
- margin:0 auto;
- font-family:Microsoft YaHei, Arial, Helvetica, sans-serif;
- }
- #reg{
- width:770px;
- background:#fff;
- border-radius:5px;
- -webkit-border-radius:5px;
- -moz-border-radius:5px;
- margin:85px auto;
- overflow:hidden;
- }
- .reg_title{
- font-size:24px;
- text-align:center;
- border-bottom:1px dashed #ccc;
- padding:15px 0;
- margin:0 10px;
- }
- .reg_con{
- margin:20px 10px;
- overflow:hidden;
- }
- .reg_con li ul {
- margin:5px 0;
- float:left;
- width:100%;
- line-height:35px;
- }
- .reg_con li ul li{
- float:left;
- }
- .reg_con li ul li span{
- font-size:14px;
- }
- .reg_con li ul li input{
- height:25px;
- width:300px;
- border:1px solid #666;
- }
- .reg_con li ul li p{
- color:#999;
- font-size:12px;
- position:relative;
- padding-left:20px;
- }
- .reg_con li ul li p i{
- width:16px;
- height:16px;
- display:block;
- position:absolute;
- left:;
- top:10px;
- background:url(http://www.w3cfuns.com/data/attachment/album/201405/21/173824rvf1jjbs6j9ovisw.png.thumb.jpg) no-repeat 0 0;
- display:none;
- }
- .reg_con li ul.def li span{
- font-size:14px;
- }
- .reg_con li ul.def li input{
- height:25px;
- width:300px;
- margin-right:20px;
- }
- .reg_con li ul.def li p{
- color:#333;
- font-size:12px;
- }
- .reg_con li ul.point li span{
- font-size:14px;
- color:#00f;
- }
- .reg_con li ul.point li input{
- height:25px;
- width:300px;
- margin-right:20px;
- border:1px solid #00f;
- }
- .reg_con li ul.point li p{
- font-size:12px;
- }
- .reg_con li ul.point li p i{
- display:block;
- }
- .reg_con li ul.error li span{
- font-size:14px;
- color:#f00;
- }
- .reg_con li ul.error li input{
- height:25px;
- width:300px;
- margin-right:20px;
- border:1px solid #f00;
- }
- .reg_con li ul.error li p{
- font-size:12px;
- padding-left:20px;
- }
- .reg_con li ul.error li p i{
- background-position:0 -16px;
- display:block;
- }
- .reg_con li ul.ok li input{
- height:25px;
- width:300px;
- margin-right:20px;
- border:1px solid #999;
- color:#999;
- }
- .reg_con li ul.ok li p i{
- background-position:0 -32px;
- display:block;
- }
- #reg_sub{text-align:center;margin:0 auto;margin-left:10%;}
- #reg_sub a{
- border:1px solid #0066bb;
- color:#ccc;
- background:#0055AA;
- padding:5px 20px;
- }
- #reg_sub a:hover{
- background:#0066bb;
- color:#fff;
- }
- </style>
- <script type="text/javascript">
- /*闭包*/
- (
- function(){
- var $=function(_id){
- return document.getElementById(_id);
- }
- var inpStyle=function(){
- var inp=document.getElementsByTagName("input");//获得id为inpList 中的所有的input
- for(i=0;i<inp.length;i++){
- inp[i].onfocus=function(){
- var par=this.parentNode.parentNode;
- var msg=par.getElementsByTagName("p")[0];
- par.className="point";
- check.focus[this.id](par,this,msg);
- }
- inp[i].onblur=function(){
- var par=this.parentNode.parentNode;
- var msg=par.getElementsByTagName("p")[0];
- par.className="def";
- check.blurs[this.id](par,this,msg);
- }
- }
- $("enter").onclick=function(){
- subback(inp);
- }
- }
- var check={
- focus:{
- uname:function(_ul,_this,_p){
- _ul.className="point";
- _p.innerHTML="<i></i>给自己起个名字吧,它将成为您登录本站的用户名";
- },
- email:function(_ul,_this,_p){
- _ul.className="point";
- _p.innerHTML="<i></i>请输入您的常用邮箱地址,此邮箱地址将作为修改密码";
- },
- mobile:function(_ul,_this,_p){
- _ul.className="point";
- _p.innerHTML="<i></i>请输入您的手机号码,方便我们之间的联系";
- },
- pwd:function(_ul,_this,_p){
- _ul.className="point";
- _p.innerHTML="<i></i>请输入安全密码,它将作为您的登录密码";
- },
- qrpwd:function(_ul,_this,_p){
- _ul.className="point";
- _p.innerHTML="<i></i>请将上面的密码再输入一次";
- }
- },
- blurs:{
- uname:function(_ul,_this,_p){//ul标签、当前输入框、错误的信息
- _ul.className="error";
- var flag=false;
- if(_this.value==""){
- _p.innerHTML="<i></i>用户名不能为空!";
- }else if(_this.value.length<3 || _this.value.length>16){
- _p.innerHTML="<i></i>用户名长度应控制在3-16位字符之间!";
- }else if(!/^[\w_-\u4e00-\u9fa5]+$/.test(_this.value)){
- _p.innerHTML = "<i></i>用户名只能由大小写字母,数字,下划线,中横线和中文组成!";
- }else{
- _ul.className="ok";
- _p.innerHTML="<i></i>";
- flag=true;
- }
- return flag;
- },
- email:function(_ul,_this,_p){
- _ul.className="error";
- var flag=false;
- if(_this.value==""){
- _p.innerHTML="<i></i>邮箱不能为空!";
- }else if(!/\w+((-w+)|(\.\w+))*\@[\w]+((\.|-)[\w]+)*\.[\w]+/.test(_this.value)){
- _p.innerHTML="<i></i>请输入正确的邮箱地址!";
- }
- else{
- _ul.className="ok";
- _p.innerHTML="<i></i>";
- flag=true;
- }
- return flag=false;
- }
- ,
- mobile:function(_ul,_this,_p){
- _ul.className="error";
- var flag=false;
- if(_this.value==""){
- _p.innerHTML="<i></i>电话号码不能为空!";
- }else if(!/0?(13|14|15|18)[0-9]{9}/.test(_this.value)){
- _p.innerHTML="<i></i>请输入正确的电话号码!";
- }
- else{
- _ul.className="ok";
- _p.innerHTML="<i></i>";
- flag=true;
- }
- return flag;
- }
- ,
- pwd:function(_ul,_this,_p){
- _ul.className="error";
- var flag=false;
- if(_this.value==""){
- _p.innerHTML="<i></i>密码不能为空!";
- }else if(_this.value.length<6 || _this.value.length>16){
- _p.innerHTML="<i></i>密码应该在6-16位之间!";
- }else if(!/^[\w_-]+$/.test(_this.value)){
- _p.innerHTML="<i></i>密码只能由大小字母、数字、下划线组成!";
- }
- else{
- _ul.className="ok";
- _p.innerHTML="<i></i>";
- flag=true;
- }
- return flag;
- }
- ,
- qrpwd:function(_ul,_this,_p){
- _ul.className="error";
- var flag=false;
- if(_this.value==""){
- _p.innerHTML="<i></i>为了保证您输入的密码准确无误,请再次输入密码!!";
- }else if(_this.value!=$("pwd").value){
- _p.innerHTML="<i></i>密码两次输入不一致,请重新输入!";
- }
- else{
- _ul.className="ok";
- _p.innerHTML="<i></i>";
- flag=true;
- }
- return flag;
- }
- }
- }
- var subback=function(inps){
- for(var i=0;i<inps.length;i++){
- //inps[i].focus();
- var flag=true;
- var par=inps[i].parentNode.parentNode;
- var msg=par.getElementsByTagName("p")[0];
- if(!check.blurs[inps[i].id](par,inps[i],msg)){
- flag=false;
- break;
- }
- }
- if(flag){
- alert("可提交");
- }
- else{
- alert("不可提交");
- }
- }
- window.onload=function(){//相当于程序的入口 main方法
- inpStyle();
- }
- }
- )();
- </script>
JS——简单的正则表达式验证的更多相关文章
- js如何使用正则表达式验证电话号码(可选区号)和邮箱?(分步骤)
js如何使用正则表达式验证电话号码(可选区号)和邮箱?(分步骤) 一.总结 js进阶正则表达式16电话号码和邮箱正则(分类解决邮箱验证)(分组加?解决电话号码区号选择问题)([\w\.-]中括号解决邮 ...
- JS简单表单验证
这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...
- JS的常用正则表达式 验证密码(转载自用)
JS的正则表达式 强:字母+数字+特殊字符 ^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^& ...
- JS和Java正则表达式验证
js代码 <script type="text/javascript"> function SubmitCk() { var reg = /^([a-zA-Z0-9]+ ...
- js中通过正则表达式验证邮箱是否合法
文章目录 1.效果展示 2.问题描述 3.代码实现 1.效果展示 2.问题描述 当用户在输入框输入邮箱后.点击验证邮箱按钮.系统给出提示信息. 3.代码实现 <!DOCTYPE html> ...
- JS的常用正则表达式 验证密码用户名等
//校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) return false retur ...
- js、javascript正则表达式验证身份证号码
function isCardNo(card) { // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X var reg = /(^\d{1 ...
- JS正则表达式验证账号、手机号、电话和邮箱
JS正则表达式验证账号.手机号.电话和邮箱 效果体验:http://keleyi.com/keleyi/phtml/jstexiao/15.htm 验证帐号是否合法 验证规则:字母.数字.下划线组成, ...
- jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js)
最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...
随机推荐
- 流畅的python第十一章接口学习记录
鸭子协议(忽略对象真正类型,转而关注对象有没有实现所需的方法,签名和语义) 标准库中的抽象基类 collections.abc模块中的抽象基类 抽象方法是抽象基类中用来强制子类必须实现的方法,如果子类 ...
- hdr rt format对颜色的影响
我刚刚终于理解为什么rendertarget的format对颜色的影响为什么那么大了 r8g8b8a8 这种会有band artifacts rgbafloat 这种浮点rt 的色带变化更为连贯(R ...
- Vmware 14.0 版本中安装Ubuntu 17.10版本无法调整分辨率的问题
装完ubuntu后发现在vmware中选择了查看-自动调整大小-自适应客户机,虚拟机也无法随着窗口大小来切换分辨率,其实是因为WAYLAND限制了. 1. 先安装vim sudo apt-get in ...
- 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题
一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...
- ASP.NET获取网站根目录(路径)
摘自: http://blog.sina.com.cn/s/blog_7d0dcba60100vb7r.html 网站在服务器磁盘上的物理路径: HttpRuntime.AppDomainAppPat ...
- [视频解说]Java(JDK的下载安装及第一个程序执行)
(JDK的下载安装及第一个程序执行) 内容:Java JDK 的安装以及HelloWorld 程序的执行 欢迎童鞋们前往围观 http://v.youku.com/v_show/id_XODA3Mzk ...
- Android6.0指纹识别开发
近期在做android指纹相关的功能,谷歌在android6.0及以上版本号对指纹识别进行了官方支持.当时在FingerprintManager和FingerprintManagerCompat这两个 ...
- svn: warning: xxxx is already under version control
svn stat 查看当前目录下svn状态 svn remove xxxx svn add xxx svn ci -m "注释"
- 如何让你的webapp也能跳窗口搜索
目前很多手机app或者一些webapp,搜索栏基本采用跳窗口的搜索方式 怎么做 实现方式: 1.在触发外层的input的时候打开个modal层,默认打开该modal层的时候就触发了moda里面的inp ...
- {...formItemLayout} 标签布局
{...formItemLayout}是reactjs中属性的写法{...props},formItemLayout标签布局,wrapperCol需要为输入控件设置布局样式时,和label 标签布局, ...