页面表单验证功能的正则表达式

Script House收集的这篇文章主要介绍了页面表单验证功能的正则表达式. Script House编辑器感觉非常好. 现在使用正则校验表单，我将与您分享并提供参考.

通常，完成注册页面后，当用户完成信息时，他们需要验证其信息. 这需要使用正则表达式. 有关详细信息，请参见以下示例.

效果图: （当用户填写的信息不符合规格时，将显示错误提示）

我只提供html结构和js. 您可以根据设计草案来编写自己的样式. 我为正确的时间和错误的时间添加了不同的类使用正则校验表单，并使用了不同的高度. 正确的高度很小. 您可以隐藏提示的红色字母.

html结构:

<div id="wrap">
  <h1>注册</h1>
  <div>
    <input type="text" class='match' name='user' placeholder='请输入用户名' />
    <span>字母开头,长度5-10位字母数字下划线</span>
  </div>
  <div>
    <input type="password" class='match' name='pwd' placeholder='请输入密码' />
    <span>字母数字长度6-18位</span>
  </div>
  <div>
    <input type="password" name='pwd2' placeholder='请再次输入密码' />
    <span>两次密码不一致</span>
  </div>
  <div>
    <input type="text" class='match' name="tel" placeholder='请输入电话' />
    <span>电话号码格式不正确</span>
  </div>
  <div>
    <input type="text" class='match' name="mail" placeholder='请输入e-mail' />
    <span>邮箱格式不正确</span>
  </div>
  <div>
    <input type="text" class='match' name="IDCard" placeholder='请输入' />
    <span>格式不正确</span>
  </div>
  <div class='submit'>
    <input type="submit" value='注册' />
  </div>
  <p id='tip'>请先输入密码</p>
</div>

js:

//正则表达式已//双斜杠开始和结束，限制必须要以什么什么开头要在之前加^，限制必须要以什么什么结尾要在后面加$，例：/^正则$/
<script type="text/javascript">
  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';
      };
    };
  };
</script>

以上是编辑器引入的用于执行页面表单验证功能的正则表达式. 希望对大家有帮助. 如果您有任何疑问，请给我留言，编辑会及时给您答复. 非常感谢您对编程技巧网站的支持！

以上是脚本室为您执行页面表单验证功能所收集的正则表达式的所有内容. 希望本文能帮助您解决正则表达式执行页面表单验证功能时遇到的程序开发问题.

如果您认为Script House网站的内容不错，欢迎向您的程序员朋友推荐Script House网站.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-274729-1.html