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

程序员文章站 2022-08-17 23:03:50

先看看效果图：首先给大家解释一些符号相关的意义 * 匹配前面的子表达式零次或多次； ^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置 1. /^$/...

先看看效果图：

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

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

* 匹配前面的子表达式零次或多次；
^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置
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>

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

上一篇：支付宝怎么向微信/qq好友发起收款?

下一篇：淘宝怎么关闭应用内横幅提醒?

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

PHP简单验证码功能机制实例详解

js中自定义react数据验证组件实例详解

Android 中倒计时验证两种常用方式实例详解

layui的表单提交以及验证和修改弹框的实例

layui原生表单验证的实例

yii用户注册表单验证实例

详解vue表单验证组件 v-verify-plugin

Yii中表单用法实例详解

Angular表单验证实例详解

vee-validate vue 2.0自定义表单验证的实例