关于表单验证中常见的正则表达式以及写一个表单验证

最新推荐文章于 2022-05-08 17:13:52 发布

shixiao_baia

最新推荐文章于 2022-05-08 17:13:52 发布

阅读量579

点赞数 1

分类专栏： javaScript

本文链接：https://blog.csdn.net/shixiao_baia/article/details/88561609

版权

javaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于表单验证中常见的语法数量词有：
x?: 当前x字符出现0次或1次
x+：当前x字符出现一次或多次
x*:当前x字符0次或多次
x{n}:当前x字符恰好出现n次
x{n,}:当前x字符至少出现n次
x{n,m}:当前x字符至少n次但不超过m次
【a-zA-Z0-9】:不区分大小写字母，数字字符

在js中如何定义一个正则：

var 变量名(reg)=/中间书写正则语法/；
使用正则表达式中的内置方法test(表单中输入的str),如果匹配会返回true
表单验证时：一般是规定边界匹配器
举个表单验证的例子


<script>        
 var str="12";          
 var reg=/[a-zA-Z0-9]/;      
  if(reg.test(str)){          
  alert("条件成立")；      
    }                   
   </script>

一个完整的表单验证的例子：
定义当前的表单的正则规则为:
用户名:由3-14位的数字或者字母组成
密码:由8~16位的数字或者字母组成
确认密码:确认密码和密码的内容一致
邮箱:企业邮箱/QQ邮箱/
数字或者字母@数字或者字母(.com/.cn/.com.cn/…)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>js表单验证</title>
<script>
 
//校验用户名:
function checkUserName(){
 //1.获取用户名的内容
    var username = document.getElementById("username").value ;
 //2.用户名:由4-14位的数字或者字母组成 
 var reg = /^[a-zA-Z0-9]{3,14}$/ ;
 //3.获取id="user_span"的span标签对象
 var userSpan = document.getElementById("user_span") ;
 //4.校验
 if(reg.test(username)){
  //成功,设置userSpan标签对象的innerHTML属性
  userSpan.innerHTML="当前用户名可用".fontcolor("green") ;
  return true ;;;
 }else{
  userSpan.innerHTML="用户名不可用".fontcolor("red") ;
  return false ;
 }
}
//密码的校验
function checkPwd(){
 //1.获取密码输入框的内容
 var pwd = document.getElementById("pwd").value ;
 //定义密码框的正则规则:密码:由6~16位的数字或者字母组成
 var reg = /^[a-zA-z0-9]{8,16}$/ ;
 //获取id="pwd_span" 标签对象
 var pwdSpan = document.getElementById("pwd_span") ;
 //校验
 if(reg.test(pwd)){
  pwdSpan.innerHTML ="当前密码可用".fontcolor("green") ;
  return true ;
 }else{
  pwdSpan.innerHTML ="当前密码不可用".fontcolor("red") ;
  return false ;
 }
}
//确认密码
function checkRePwd(){
 //分别获取密码框的内容以及确认密码框的内容
 var pwd = document.getElementById("pwd").value ;
 var rePwd = document.getElementById("repwd").value ;
 //获取id=“repwd_span”标签对象
 var repwdSpan = document.getElementById("repwd_span") ;
 if(pwd==rePwd){
  repwdSpan.innerHTML="与输入的密码一致".fontcolor("green") ;
  return true ;
 }else{
  repwdSpan.innerHTML="两次输入的密码不一致".fontcolor("red") ;
  return false ;
 }
}
//邮箱的校验
function checkEmail(){
 //获取邮箱内容
 var email = document.getElementById("email").value ;
 //定义的邮箱的正则：
 //数字或者字母@数字或者字母(.com/.cn/.com.cn/...)
 //.---> \.
 var reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z]{2,3}){1,2}$/ ;
 //获取id="email_span" 的标签对象
 var emailSpan = document.getElementById("email_span") ;
 //校验
 if(reg.test(email)){
  emailSpan.innerHTML="邮箱格式正确".fontcolor("green") ;
  return true ;
 }else{
  emailSpan.innerHTML="对不起，邮箱格式不正确".fontcolor("red") ;
  return false ;
 }
}
//校验所有的表单的内容，如果都符合条件，才能提交成功
function checkAll(){
 if(checkUserName() && checkPwd() && checkRePwd() && checkEmail()){
  //表示提交成功
  return true ;
 }else{
  //提交失败！
  return false ;
 }
}
</script>
 </head>
 <body>
 <!--
onsubmit事件:表单提交是否成功,true,表示提交成功
false表示提交失败
 
-->
<form action="backend.html" method="post" onsubmit="return checkAll()  ">
用户名:<input type="text" id="username" onblur="checkUserName()" /><span id="user_span"></span><br />
密&nbsp;&nbsp;&nbsp;码:<input type="password" id="pwd" onblur="checkPwd()" /><span id="pwd_span"></span><br />
确认密码:<input type="password" id="repwd" onblur="checkRePwd()" /><span id="repwd_span"></span><br />
邮箱:<input type="text" id="email" onblur="checkEmail()" /><span id="email_span"></span><br />
<input type="submit" value="注册" />
</form>
 </body>
</html>

shixiao_baia

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
关于表单验证中常见的正则表达式以及写一个表单验证

关于表单验证中常见的语法数量词有：x?: 当前x字符出现0次或1次x+：当前x字符出现一次或多次x*:当前x字符0次或多次x{n}:当前x字符恰好出现n次x{n,}:当前x字符至少出现n次x{n,m}:当前x字符至少n次但不超过m次【a-zA-Z0-9】:不区分大小写字母，数字字符在js中如何定义一个正则：var 变量名(reg)=/中间书写正则语法/；使用正则表达式中的内置方...
复制链接

扫一扫

专栏目录