首页 web前端 js教程 正则表达式表单验证的实例介绍

正则表达式表单验证的实例介绍

Jan 04, 2018 am 10:01 AM
实例 表达式 验证

这次给大家带来正则表达式表单验证实例介绍,下面就是实战案例,一起来看一下

首先给大家解释一些符号相关的意义

* 匹配前面的子表达式零次或多次;

^ 匹配输入字符串的开始位置;$匹配输入字符串的结束位置
1. /^$/ 这个是个通用的格式。
2. 里面输入需要实现的功能。
\d 匹配一个数字字符,等价于[0-9]
+ 匹配前面的子表达式一次或多次;
?匹配前面的子表达式零次或一次;
下面通过一段代码给大家分析表单验证正则表达式,具体代码如下:

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-">
 <title>正则验证常用表单方法</title>
 <script type="text/javascript">
 function focus_username() {
  var resultObj=document.getElementById(&#39;result_username&#39;);
  resultObj.innerHTML="以字母开头的-位的字符";
  resultObj.style.color="blue";
  document.form.username.style="border:px solid red";
 }
 // function blur_username () {
 //第一种方法:
 // var resultObj=document.getElementById(&#39;result_username&#39;)
 // if (document.form.username.value==&#39;&#39;) {
 // resultObj.innerHTML="用户名不能为空";
 // resultObj.style.color="red";
 // return false;
 // }else if (document.form.username.value.length<||document.form.username.value.length>) {
 // resultObj.innerHTML="用户名字符长度必须介于到个之间";
 // resultObj.style.color="red";
 // return false;
 // }else{
 // resultObj.innerHTML="ok";
 // resultObj.style.color="green";
 // }
 // }
 function blur_username () {
  //第二种方法:
  var resultObj=document.getElementById(&#39;result_username&#39;)
  var pre=document.form.username.value;
  var reg=/^[a-zA-Z]\w{,}$/;
  if (pre==&#39;&#39;) {
  resultObj.innerHTML="(必填项)用户名不能为空";
  resultObj.style.color="red";
  return false;
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="用户名字符输入不合法";
  resultObj.style.color="red";
  return false;
  }else{
  resultObj.innerHTML="ok";
  resultObj.style.color="green";
  return true;
  }
 }
 function focus_userpwd() {
 var resultObj=document.getElementById(&#39;result_userpwd&#39;);
 resultObj.innerHTML="(必填项)介于-位的非特殊字符";
 resultObj.style.color="blue";
 document.form.userpwd.style="border:px solid red";
 }
 // function blur_userpwd () {
 // var resultObj=document.getElementById(&#39;result_userpwd&#39;)
 // if (document.form.userpwd.value==&#39;&#39;) {
 // resultObj.innerHTML="用户名密码不能为空";
 // resultObj.style.color="red";
 // return false;
 // }else if (document.form.userpwd.value.length<||document.form.userpwd.value.length>) {
 // resultObj.innerHTML="用户名密码字符长度必须介于到个之间";
 // resultObj.style.color="red";
 // return false;
 // }else{
 // resultObj.innerHTML="ok";
 // resultObj.style.color="green";
 // return true;
 // }
 // }
 function blur_userpwd () {
 var resultObj=document.getElementById(&#39;result_userpwd&#39;)
  var pre=document.form.userpwd.value;
  var reg=/^\w{,}$/;
 if (pre==&#39;&#39;) {
  resultObj.innerHTML="(必填项)用户名密码不能为空";
  resultObj.style.color="red";
  return false;
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="用户名密码字符输入不合法";
  resultObj.style.color="red";
  return false;
  }else{
  resultObj.innerHTML="ok";
  resultObj.style.color="green";
  return true;
  }
 }
 function focus_userpwd() {
 var resultObj=document.getElementById(&#39;result_userpwd&#39;);
 resultObj.innerHTML="(必填项)介于-位的非特殊字符";
 resultObj.style.color="blue";
 document.form.userpwd.style="border:px solid red";
 }
 // function blur_userpwd () {
 // var resultObj=document.getElementById(&#39;result_userpwd&#39;)
 // if (document.form.userpwd.value==&#39;&#39;) {
 // resultObj.innerHTML="用户名密码不能为空";
 // resultObj.style.color="red";
 // return false;
 // }else if (document.form.userpwd.value!=document.form.userpwd.value) {
 // resultObj.innerHTML="两次用户名密码输入不一致";
 // resultObj.style.color="red";
 // return false;
 // }else{
 // resultObj.innerHTML="ok";
 // resultObj.style.color="green";
 // return true;
 // }
 // }
 function blur_userpwd () {
  var resultObj=document.getElementById(&#39;result_userpwd&#39;)
  var pre=document.form.userpwd.value;
  var reg=/^\w{,}$/;
  if (pre==&#39;&#39;) {
  resultObj.innerHTML="(必填项)用户名密码不能为空";
  resultObj.style.color="red";
  return false;
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="用户名密码字符输入不合法";
  resultObj.style.color="red";
  return false;
  }else if(document.form.userpwd.value!=document.form.userpwd.value){
  resultObj.innerHTML="两次用户名密码输入不一致";
  resultObj.style.color="red";
  return false;
  }else {resultObj.innerHTML="ok";
  resultObj.style.color="green";
  return true;
  } 
 }
 function focus_Mobile() {
  var resultObj=document.getElementById(&#39;result_Mobile&#39;);
  resultObj.innerHTML="请输入你位数的手机号码";
  resultObj.style.color="blue";
  document.form.Mobile.style="border:px solid red";
 }
 function blur_Mobile() {
  var resultObj=document.getElementById(&#39;result_Mobile&#39;)
  var pre=document.form.Mobile.value;
  var reg=/^[||][-]{}$/;
  if (pre==&#39;&#39;) {
  resultObj.innerHTML="手机号码不能为空";
  resultObj.style.color="red"; 
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="手机号码字符输入不合法";
  resultObj.style.color="red"; 
  }else {
  resultObj.innerHTML="ok";
  resultObj.style.color="green"; 
  } 
 }
 function focus_Tel() {
  var resultObj=document.getElementById(&#39;result_Tel&#39;);
  resultObj.innerHTML="请输入你的座机号码";
  resultObj.style.color="blue";
  document.form.Tel.style="border:px solid red";
 }
 function blur_Tel() {
  var resultObj=document.getElementById(&#39;result_Tel&#39;)
  var pre=document.form.Tel.value;
  var reg=/^{}[-]{,}\-[]?[-]{}$/;
  if (pre==&#39;&#39;) {
  resultObj.innerHTML="座机号码不能为空";
  resultObj.style.color="red";
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="座机号码字符输入不合法";
  resultObj.style.color="red";
  }else {
  resultObj.innerHTML="ok";
  resultObj.style.color="green"; 
  } 
 }
 function focus_mail() {
  var resultObj=document.getElementById(&#39;result_mail&#39;);
  resultObj.innerHTML="请输入你的邮箱号码";
  resultObj.style.color="blue";
  document.form.mail.style="border:px solid red";
 }
 function blur_mail() {
  var resultObj=document.getElementById(&#39;result_mail&#39;);
  var pre=document.form.mail.value;
  var reg=/^[a-zA-Z-][a-zA-Z-\._]+@[a-z-]+\.(com)(\.(cn))?$/;
  if (pre==&#39;&#39;) {
  resultObj.innerHTML="邮箱号码不能为空";
  resultObj.style.color="red";
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="邮箱号码字符输入不合法";
  resultObj.style.color="red";
  }else {
  resultObj.innerHTML="ok";
  resultObj.style.color="green";
  } 
 }
 function focus_ID() {
  var resultObj=document.getElementById(&#39;result_ID&#39;);
  resultObj.innerHTML="(必填项)请输入你位的二代身份证号码";
  resultObj.style.color="blue";
  document.form.ID.style="border:px solid red";
 }
 function blur_ID() {
  var resultObj=document.getElementById(&#39;result_ID&#39;);
  var pre=document.form.ID.value;
  var reg=/^[-]{}[-x]$/;
  if (pre==&#39;&#39;) {
  resultObj.innerHTML="(必填项)二代身份证号码字符不能为空";
  resultObj.style.color="red";
  return false;
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="二代身份证号码字符输入不合法";
  resultObj.style.color="red";
  return false;
  }else {
  resultObj.innerHTML="ok";
  resultObj.style.color="green";
  return true;
  } 
 }
 function checkForm(){
  var flag_username=blur_username();
  var flag_userpwd=blur_userpwd();
  var flag_userpwd=blur_userpwd();
  var flag_ID=blur_ID(); 
  if (flag_username==true&&flag_userpwd==true&&flag_userpwd==true&&flag_ID==true) { 
  return true;
  }else{
  return false;
  }
 }
 </script>
 <style type="text/css">
 body{background-image: url(images/.jpg);background-size: cover;}
 table{margin-left: px;margin-top: px;background-image: url(images/.jpg);background-size: cover;box-shadow: px px px #C}
 .vip{font-size: px;}
 </style>
 </head>
 <body>
 <form name="form" action=".php" method="post" onsubmit="return checkForm()">
 <table width="px" border="px" bordercolor="red" cellpadding="px" cellspacing="px" align="center" >
 <tr>
  <th colspan="" class="vip">VIP会员注册</th>
 </tr>
 <tr>
  <td width="px" align="right" >用户名:</td>
  <td width="px"><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" ></td>
  <td><div width="px" id="result_username"></div></td>
 </tr>
 <tr>
  <td align="right">密码:</td>
  <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()" /></td>
  <td><div id="result_userpwd"></div></td>
 </tr>
 <tr>
  <td align="right">确认密码:</td>
  <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/></td>
  <td><div id="result_userpwd"></div></td>
 </tr>
 <tr>
  <td align="right">手机号码:</td>
  <td><input type="text" name="Mobile" onfocus="focus_Mobile()" onblur="blur_Mobile()"/></td>
  <td><div id="result_Mobile"></div></td>
 </tr>
 <tr>
  <td align="right">座机号码:</td>
  <td><input type="text" name="Tel" onfocus="focus_Tel()" onblur="blur_Tel()"/></td>
  <td><div id="result_Tel"></div></td>
 </tr>
 <tr>
  <td align="right">邮箱号码:</td>
  <td><input type="text" name="mail" onfocus="focus_mail()" onblur="blur_mail()"/></td>
  <td><div id="result_mail"></div></td>
 </tr>
 <tr>
  <td align="right">二代身份证:</td>
  <td><input type="text" name="ID" onfocus="focus_ID()" onblur="blur_ID()"/></td>
  <td><div id="result_ID"></div></td>
 </tr>
 <tr>
  <td align="center" colspan=""><input type="submit" value="提交注册" />
  <input type="reset" value="重置资料" /></td>
  <td></td>
 </tr>
 </table>
 </form>
 </body>
 </html>
登录后复制

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

微信小程序怎么上传头像

mint-ui的search组件怎样可以在键盘显示搜索按钮

jQuery如何实现前端搜索功能

以上是正则表达式表单验证的实例介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1673
14
CakePHP 教程
1428
52
Laravel 教程
1333
25
PHP教程
1277
29
C# 教程
1257
24
如何在PDF中验证签名 如何在PDF中验证签名 Feb 18, 2024 pm 05:33 PM

我们通常接收到政府或其他机构发送的PDF文件,有些文件带有数字签名。验证签名后,我们会看到SignatureValid消息和一个绿色勾号。如果签名未验证,会显示有效性未知。验证签名很重要,下面看看如何在PDF中进行验证。如何在PDF中验证签名验证PDF格式的签名使其更可信,文档更容易被接受。您可以通过以下方式验证PDF文档中的签名。在AdobeReader中打开PDF右键单击签名,然后选择显示签名属性单击显示签名者证书按钮从“信任”选项卡将签名添加到“受信任的证书”列表中单击验证签名以完成验证让

微信好友辅助验证进行解封的详细方法 微信好友辅助验证进行解封的详细方法 Mar 25, 2024 pm 01:26 PM

1、打开微信进入后,点击搜索图标,输入微信团队,点击下方的服务进入。2、进入后,点击左下方的自助工具的选项。3、点击后,在上方的选项内,点击解封/申诉辅助验证的选项。

如何使用正则表达式验证IFSC代码? 如何使用正则表达式验证IFSC代码? Aug 26, 2023 pm 10:17 PM

印度金融系统代码是缩写。参与电子资金转移系统的印度银行分支机构由一个特殊的11位字符代码进行标识。印度储备银行在互联网交易中使用此代码在银行之间转移资金。IFSC代码分为两个部分。银行由前四个字符进行标识,而分支机构由最后六个字符进行标识。NEFT(全国电子资金转移)、RTGS(实时毛额结算)和IMPS(即时支付服务)是一些需要IFSC代码的电子交易。Method使用正则表达式验证IFSC代码的一些常见方法有:检查长度是否正确。检查前四个字符。Checkthefifthcharacter.Che

golang中如何验证输入是否为全角字符 golang中如何验证输入是否为全角字符 Jun 25, 2023 pm 02:03 PM

在golang中,验证输入是否为全角字符需要用到Unicode编码和rune类型。Unicode编码是一种将字符集中的每个字符分配一个唯一的数字码位的字符编码标准,其中包含了全角字符和半角字符。而rune类型是golang中用于表示Unicode字符的类型。第一步,需要将输入转换为rune类型的切片。这可以通过使用golang的[]rune类型进行转换,例如

PHP 8 新特性:增加了验证和签名 PHP 8 新特性:增加了验证和签名 Mar 27, 2024 am 08:21 AM

PHP8是PHP的最新版本,为程序员带来了更多的便利和功能。这个版本特别关注安全性和性能,其中一个值得注意的新特性是增加了验证和签名功能。在本文中,我们将深入了解这些新的功能及其用途。验证和签名是计算机科学中非常重要的安全概念。它们通常用于确保传输的数据是完整和真实的。在处理在线交易和敏感信息时,验证和签名变得尤为重要,因为如果有人能够篡改数据,可能会对

如何在Laravel中验证路由参数? 如何在Laravel中验证路由参数? Sep 01, 2023 pm 02:41 PM

在Laravel中,路由在paths/文件夹中定义。路由在web.php文件中定义。该文件是在laravel安装完成后创建的。Laravel路由接受URI和闭包函数,如下所示-useIlluminate\Support\Facades\Route;Route::get('/student',function(){return'HelloStudent';});在web/routes.php中定义的路由被分配到web中间件组中,并且它们具有会话状态和CSRF保护。您还可以在路由中调用控制器如下所示

手机号码验证登录注册的PHP实现指南 手机号码验证登录注册的PHP实现指南 Aug 17, 2023 pm 03:18 PM

手机号码验证登录注册的PHP实现指南一、概述手机号码验证是现代互联网应用中常见的功能之一,它不仅可以用于用户注册和登录验证,还可以用于短信验证码发送等场景。本文将介绍如何使用PHP语言实现手机号码验证登录注册功能。二、环境要求在开始编写代码之前,我们需要确保以下环境已经准备就绪:PHP环境:PHP的版本需达到5.6或以上。数据库:本文使用MySQL数据库作为

学习Golang指针转换的最佳实践示例 学习Golang指针转换的最佳实践示例 Feb 24, 2024 pm 03:51 PM

Golang是一门功能强大且高效的编程语言,可以用于开发各种应用程序和服务。在Golang中,指针是一种非常重要的概念,它可以帮助我们更灵活和高效地操作数据。指针转换是指在不同类型之间进行指针操作的过程,本文将通过具体的实例来学习Golang中指针转换的最佳实践。1.基本概念在Golang中,每个变量都有一个地址,地址就是变量在内存中的位置。

See all articles