详解正则表达式表单验证实例

2024-12-20 09:29:31

先看看效果图：

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

* 匹配前面的子表达式零次或多次；
^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置
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('result_username');
  resultObj.innerHTML="以字母开头的-位的字符";
  resultObj.style.color="blue";
  document.form.username.style="border:px solid red";
 }
 // function blur_username () {
 //第一种方法：
 // var resultObj=document.getElementById('result_username')
 // if (document.form.username.value=='') {
 // 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('result_username')
  var pre=document.form.username.value;
  var reg=/^[a-zA-Z]\w{,}$/;
  if (pre=='') {
  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('result_userpwd');
 resultObj.innerHTML="(必填项)介于-位的非特殊字符";
 resultObj.style.color="blue";
 document.form.userpwd.style="border:px solid red";
 }
 // function blur_userpwd () {
 // var resultObj=document.getElementById('result_userpwd')
 // if (document.form.userpwd.value=='') {
 // 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('result_userpwd')
  var pre=document.form.userpwd.value;
  var reg=/^\w{,}$/;
 if (pre=='') {
  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('result_userpwd');
 resultObj.innerHTML="(必填项)介于-位的非特殊字符";
 resultObj.style.color="blue";
 document.form.userpwd.style="border:px solid red";
 }
 // function blur_userpwd () {
 // var resultObj=document.getElementById('result_userpwd')
 // if (document.form.userpwd.value=='') {
 // 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('result_userpwd')
  var pre=document.form.userpwd.value;
  var reg=/^\w{,}$/;
  if (pre=='') {
  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('result_Mobile');
  resultObj.innerHTML="请输入你位数的手机号码";
  resultObj.style.color="blue";
  document.form.Mobile.style="border:px solid red";
 }
 function blur_Mobile() {
  var resultObj=document.getElementById('result_Mobile')
  var pre=document.form.Mobile.value;
  var reg=/^[||][-]{}$/;
  if (pre=='') {
  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('result_Tel');
  resultObj.innerHTML="请输入你的座机号码";
  resultObj.style.color="blue";
  document.form.Tel.style="border:px solid red";
 }
 function blur_Tel() {
  var resultObj=document.getElementById('result_Tel')
  var pre=document.form.Tel.value;
  var reg=/^{}[-]{,}\-[]?[-]{}$/;
  if (pre=='') {
  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('result_mail');
  resultObj.innerHTML="请输入你的邮箱号码";
  resultObj.style.color="blue";
  document.form.mail.style="border:px solid red";
 }
 function blur_mail() {
  var resultObj=document.getElementById('result_mail');
  var pre=document.form.mail.value;
  var reg=/^[a-zA-Z-][a-zA-Z-\._]+@[a-z-]+\.(com)(\.(cn))?$/;
  if (pre=='') {
  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('result_ID');
  resultObj.innerHTML="(必填项)请输入你位的二代身份证号码";
  resultObj.style.color="blue";
  document.form.ID.style="border:px solid red";
 }
 function blur_ID() {
  var resultObj=document.getElementById('result_ID');
  var pre=document.form.ID.value;
  var reg=/^[-]{}[-x]$/;
  if (pre=='') {
  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>

以上内容就是表单验证正则表达式实例代码，希望对大家有帮助。

常用正则表达式范例方便表单验证

复制代码代码如下: 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数:^\+?[1-9][0-9]*$ 验证非零的负整数:^\-[1-9][0-9]*$ 验证非负整数(正整数 + 0) ^\d+
js 常用正则表达式表单验证代码

正则表达式使用详解简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表
JavaScript 使用正则表达式进行表单验证的示例代码

JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字复制代码代码如下: function regIsDigit(fData) { var reg = new RegExp("^[0-9]$"); return (reg.test(fData)); } 利用这则表达式获取字符串的长度复制代码代码如下: function regDataLength(fData) { var valLength = fData.length; var reg = n
php使用ereg验证文件上传的方法

本文实例讲述了php使用ereg验证文件上传的方法.分享给大家供大家参考.具体分析如下: ereg格式如下: 复制代码代码如下: ereg(正规表达式,字符串,[匹配部分数组名]); 这里利用了ereg来验证用户上传的文件类型与文件名是否是符合文件命名规则,实例代码如下: 复制代码代码如下: if( !is_uploaded_file($upfile) ) { echo("你什么都没有上传哦!"); exit(); } else { if( !ereg(&quo
表单验证正则表达式实例代码详解

表单验证正则表达式具体内容如下所示: 首先给大家解释一些符号相关的意义 1. /^$/ 这个是个通用的格式. ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置 2. 里面输入需要实现的功能. * 匹配前面的子表达式零次或多次: + 匹配前面的子表达式一次或多次: ?匹配前面的子表达式零次或一次: \d 匹配一个数字字符,等价于[0-9] 下面通过一段代码给大家分析表单验证正则表达式,具体代码如下: <!DOCTYPE html> <h
java正则表达式表单验证类工具类(验证邮箱、手机号码、qq号码等)

java使用正则表达式进行表单验证工具类,可以验证邮箱.手机号码.qq号码等复制代码代码如下: package util; import java.util.regex.Matcher;import java.util.regex.Pattern; /** * 使用正则表达式进行表单验证 * */ public class RegexValidateUtil { static boolean flag = false; static String regex = ""
通过正则表达式实现表单验证是否为中文

JavaScript表单验证是否为中文,判断一个输入量是否为中文,通过正则表达式实现. 复制代码代码如下: // 检查是否为中文 function isChn(str){ var reg = /^[u4E00-u9FA5]+$/; if(!reg.test(str)){ return false; } return true; }
表单正则验证及文件上传验证功能

表单正则验证主要是用来对表单提交信息的过滤,防止sql注入(比如登录界面),上传的文件也需要进行文件名后缀和大小进行验证,下面是一个简单的表单验证 header("Content-type:text/html;charset=utf-8"); $user = isset($_POST['user'])?$_POST['user']:null; $password = isset($_POST['password'])?$_POST['password']:null; $arr = ar
JavaScript常用的正则表达式表单验证代码

常用的正则表达式如下: 复制代码代码如下: "^-?[1-9]\\d*$", //整数 "^[1-9]\\d*$", //正整数 "^-[1-9]\\d*$", //负整数 "^([+-]?)\\d*\\.?\\d+$", //数字 "^[1-9]\\d*|0$", //正数(正整数 + 0) "^-[1-9]\\d*|0$", //负数(负整数 + 0) "^([+-]?)
ThinkPHP实现带验证码的文件上传功能实例

本文实例讲述了ThinkPHP实现带验证码的文件上传功能.分享给大家供大家参考.具体实现方法如下: ThinkPHP上传文件非常的简单我们只要调用一个文件上传类UploadFile就可以快速的实现上传功能了,下面我来给大家整理了一个上传文件时需要验证功能的例子,希望文章对大家会带来帮助. 在模板中我们只需要调用就可以了复制代码代码如下: <html> <head> <title>验证码</title> </head> <body>
JavaScript 表单验证正则表达式大全[推荐]

具体和函数结合的使用方法,还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码复制代码代码如下: 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?

详解正则表达式表单验证实例

相关推荐

随机推荐