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

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

效果图:(当用户填写的信息不符合规范时显示错误提示)

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

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>

以上所述是小编给大家介绍的正则表达式进行页面表单验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • js正则表达式注册页面表单验证

    正则表达式方式的验证方式,这个验证比较标准而且比较全面,不过也是通过点击提交按钮才进行验证,本实例可以这样验证,具体内容如下 也可以这样验证 具体代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证类Validator v1</title> <style&g

  • 利用jquery正则表达式在页面验证url网址输入是否正确

    本文介绍的是使用jQuery正则表达式在前台页面验证url网址输入是否正确,代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"&

  • 使用正则表达式验证登录页面输入是否符合要求

    先给大家展示下效果图: 废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> $(f

  • 动态向页面添加控件和使用正则表达式的代码

    复制代码 代码如下: namespace WebCode { public partial class _default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { String str = "这是一个测试文件<{config name=\"pagetitle1\"}>,一个标签的解析<{config name=\"pagetitle2\

  • Python正则表达式匹配HTML页面编码

    html页面一般都会指定一个编码,如何获取到是处理html页面的第一步,因为错误的编码必然带来后面处理的问题.这里我用python的正则表达式写了个: import re a = ["<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />", '<meta http-equiv=Content-Type content="text/ht

  • Java使用正则表达式对注册页面进行验证功能实现

    本文给大家介绍java使用正则表达式对注册页面进行验证的代码,代码如下所示: package regex; import java.util.Scanner; import java.util.regex.Matcher; import java.util.regex.Pattern; public class registered { public static void main(String[] args) { //注册用户 Scanner sc=new Scanner(System.in

  • 正则表达式进行页面表单验证功能

    一般做到注册页面的时候,当用户填完信息,都需要对他们的信息进行验证,这就要用到正则表达式,具体看下面这个例子. 效果图:(当用户填写的信息不符合规范时显示错误提示) 我只提供了html结构和js,样式你们按照自己的设计稿自己写,我是分别给正确的时候和错误的时候加了不同的class,用了不同的高度,正确是高度小,可以把提示的红字隐藏. html结构: <div id="wrap"> <h1>注册</h1> <div> <input t

  • jQuery基于正则表达式的表单验证功能示例

    本文实例讲述了jQuery基于正则表达式的表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • AngularJS表单验证功能

    能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的.在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要. 表单验证不仅能给用户提供有用的反馈,同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏.我们要在Web前端尽力保护后端. AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用,并且非常方便.AngularJS提供了很多表单验证指令. <form name="form" novalidate> <label na

  • JS实现的简单表单验证功能完整实例

    本文实例讲述了JS实现的简单表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

  • asp.net实现取消页面表单内文本输入框Enter响应的方法

    本文实例讲述了asp.net实现取消页面表单内文本输入框Enter响应的方法.分享给大家供大家参考,具体如下: 很早以前开发asp.net项目的时候遇到的:在一个服务器TextBox控件上按下 Enter键,页面回发刷新一遍.后来google一下,发现这是asp.net2.0为表单处理专门设置的"Enter key"功能,关于asp.net ajax表单的enter key,你可以查看这一篇<ASP.NET基于Ajax的Enter键提交问题>.前面给出链接的两篇都是叫我们怎

  • jQuery扩展+xml实现表单验证功能的方法

    本文实例讲述了jQuery扩展+xml实现表单验证功能的方法.分享给大家供大家参考,具体如下: 此处表单验证jQuery 引用jquery.1.8.2.js,md5.js 扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法) String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//ie下解决trim 方法问题 (function($) { $.elementVal = new

  • JavaScript 完成注册页面表单校验的实例

    1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 第四步:数据合法(让表单提交) 第五步:数据非法(给出错误提示信息,不让表单提交) 问题:如何控制表单提交? 关于事件 onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个 返回值. onsubmit = return checkForm() 2.完成注册页面表单校验 <!DOC

  • JS实现的简单表单验证功能示例

    本文实例讲述了JS实现的简单表单验证功能.分享给大家供大家参考,具体如下: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • PHP实现的用户注册表单验证功能简单示例

    本文实例讲述了PHP实现的用户注册表单验证功能.分享给大家供大家参考,具体如下: 注册界面 register.html <h1>用户注册</h1> <form method="post" action="register_verify.php"> <input type="text" placeholder="用户名" name="username"><

随机推荐

其他