지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 정규식 양식 유효성 검사에 대한 소개 예

정규식 양식 유효성 검사에 대한 소개 예

php中世界最好的语言
풀어 주다： 2018-01-04 10:01:04
원래의
1748명이 탐색했습니다.

이번에는 정규식양식 검증의 예제 소개를 가져왔습니다. 다음은 실제 사례입니다. 살펴보겠습니다.

우선 몇 가지 기호의 의미를 설명하겠습니다.

* 이전 하위 표현식 수식을 0회 이상 일치시킵니다.

^은 입력 문자 문자열의 시작과 일치합니다. $는 입력 문자열의 끝과 일치합니다.
1. .
2. 구현해야 할 기능을 입력하세요.
d는 [0-9]
에 해당하는 숫자 문자와 일치합니다. + 이전 하위 표현식과 한 번 이상 일치합니다.
? 이전 하위 표현식을 0 또는 1번 일치시키세요.
아래는 모두를 위한 코드 분석입니다. 양식 확인 정규 표현식 , 구체적인 코드는 다음과 같습니다. 

<!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 중국어 웹사이트의 다른 관련 기사도 주목하세요!

관련 읽기:

WeChat 애플릿에 아바타를 업로드하는 방법

mint-ui의 검색 구성 요소는 키보드의 검색 버튼을 표시할 수 있습니다.

jQuery가 프런트 엔드 검색 기능을 구현하는 방법

위 내용은 정규식 양식 유효성 검사에 대한 소개 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
예 표현 확인하다
원천：php.cn
이전 기사：장바구니 기능의angular.js 구현에 대한 자세한 설명 다음 기사：스토어를 사용하여 React 구성요소 최적화
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
단어와 일치하는 정규식 새 작업 이름을 데이터베이스의 기존 작업 이름과 일치시키려는 스크립트가 있습니다. SELECTa.titleASJobTitle,j.DescriptionASMatch...
에서 2024-04-06 21:24:04
0
1
606
쿼리와 수식은 새 열로 전체 테이블을 형성합니다. 여기서 새 열은 다른 조건부 열 값을 포함하는 수식입니다. 편집: 수식은 "값" 열(카테고리를 기준으로 user_id가 가장 낮은 "값" 열)이어야 합니다. 따라서 카테고리 "...
에서 2024-04-06 21:23:40
0
2
530
MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다. 다음과 같은 스키마가 있습니다. "user_id" 및 "username" 속성이 있는 사용자 테이블과 "custome...
에서 2024-04-06 19:39:29
0
1
441
MySQL: "<여기 변수 또는 하위 쿼리>로...에서 텍스트 선택" 다음 데이터가 포함된 다음 테이블이 있습니다. id 텍스트 언어 1 독일어 텍스트 독일어 2 영어 텍스트 영어 내가 원하는 것은 다음 형식의 결과를 얻는 것입니다...
에서 2024-04-06 19:25:54
0
2
529
잘못된 React 하위 요소(발견: {clientVersion} 키가 있는 개체) 하위 요소 컬렉션을 렌더링하려면 대신 배열을 사용하세요. 다단계 양식이 있는데 제출하려고 하면 이 오류가 표시됩니다. 그러나 간단한 형태로 createOrganization 스케줄링을 사용하면 작동합니다. 백엔드 문제인...
에서 2024-04-06 16:25:39
0
1
346
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿