怎么用正则实现页面表单的验证码

PHP中文网 • 2025年3月8日 15:16:08 • 编程技术 • 阅读 2

这次给大家带来怎么用正则实现页面表单的验证码，用正则实现页面表单的验证码的注意事项有哪些，下面就是实战案例，一起来看一下。

一般做到注册页面的时候，当用户填完信息，都需要对他们的信息进行验证，这就要用到正则表达式，具体看下面这个例子。

效果图：（当用户填写的信息不符合规范时显示错误提示）

我只提供了html结构和js，样式你们按照自己的设计稿自己写，我是分别给正确的时候和错误的时候加了不同的class，用了不同的高度，正确是高度小，可以把提示的红字隐藏。

html结构：

注册

字母开头,长度5-10位字母数字下划线

字母数字长度6-18位

两次密码不一致

电话号码格式不正确

邮箱格式不正确

证件格式不正确

请先输入密码

登录后复制

js：

//正则表达式已//双斜杠开始和结束，限制必须要以什么什么开头要在之前加^，限制必须要以什么什么结尾要在后面加$，例：/^正则$/  var reg = {    user:/^[a-zA-Z]w{4,9}$/,    //用来判断用户名，第一位不能为数字，也就是小写字母或者大写字母，后面的内容w表示字符（数字字母下划线）    //要求是5-10位字符，所以出去第一位，还需要4-9位的w    pwd:/^[da-zA-Z]{6,18}$/,    //用来判断密码，html结构中要求是数字字符6到18位，d表示数字    tel:/^1[34578]d{9}$/,    //用来判断电话号码，通常手机号第一位为1，第二位只可能出现3.4.5.7.8，后面剩下的9位数字随机    mail:/^[1-9a-zA-Z_]w*@[a-zA-Z0-9]+(.[a-zA-Z]{2,})+$/,    //用来判断邮箱，通常邮箱没有以0开头的，所以第一位为1-9数字或者小写字母或者大写字母，第二位开始任意字符    //也可以只有第一位没有第二位，*表示至少0个，@后面同理，小写字母或者大写字母或者数字，.需要转意符，所以写成.    //点后面通常是com或者cn或者com.cn，所以是小写字母或者大写字母至少两位    IDCard:/^[1-9]d{16}[dxX]$/,    //用来判断身份证，通常第一位不为零，所以取1-9的数字，中间的16位数字随机，最后一位要么是数字要么是X  };  var arr = [    document.getElementsByName('user')[0],    document.getElementsByName('pwd')[0],    document.getElementsByName('tel')[0],    document.getElementsByName('mail')[0],    document.getElementsByName('IDCard')[0]  ];  for(var i=0;i<arr.length;i++){    arr[i].onblur = function(){      if(this.value){        if(reg[this.name].test(this.value)){          this.parentNode.className = 'right';  //判断正确的时候加的class        }else{          this.parentNode.className = 'wrong';  //判断错误的时候加的class          this.focus();        };      };    };   };  var oTip = document.getElementById('tip');  var opwd = document.getElementsByName('pwd2')[0];  opwd.onfous = function(){    if(!arr[1].value){      arr[1].focus();      oTip.className = 'show';      setTimeout(function () {        oTip.className = '';      },1000);    };  };  opwd.onblur = function(){    if(this.value){      if(this.value != arr[1].value){        this.focus();        this.parentNode.className ='wrong';      }else{       this.parentNode.className ='right';      };    };  };

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！