JavaScript表单及正则表达式验证实例代码

正则表达式在JavaScript中可是个强大的工具,能帮助我们进行复杂的字符串匹配、查找和替换,这篇文章主要介绍了JavaScript表单及正则表达式验证的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下。

今天我要介绍的是在JavaScript中关于表单验证内容的知识点介绍：

关于表单验证，我接下来则直接将内容以及效果显示出来并作注解，这样可以清晰看见这个表达验证的妙用：

<form id="ff" action="https://www.baidu.com">
  <h1>用户登录</h1>
  账号：<input type="text" id="zh" /> <span></span> <br />
  密码：<input type="password" id="mm" /><span></span> <br />
  <Button>登录</Button>
</form>

效果：

注：可以看到这是一个非常经典的登录界面的制作，下面我会逐一介绍他们内部的方法使用以及代码显示的效果；

onclick: 点击事件   //ondblclick: 双击事件 // onsubmit: 表单提交事件 // onblur: 失去焦点事件 // onfocus: 获取焦点事件。

注： 这是事件点击使用的方法代码；

表单提交的代码演示：

document.getElementById('ff（自定义）').onsubmit = function() {
  console.log('触发了onsubmit');
  // 获取表单中的账号和密码
  let zh = document.getElementById("zh").value;
  let mm = document.getElementById("mm").value;
  // 判断账号及密码是否为空
  if (zh.length == 0 || mm.length == 0) {
    alert('请输入正确的账号或密码')
    // 自定义弹出框
    document.querySelector('.mask').style.display = "block";
     return false;
    }
   // 以下结果为true 表允许表单提
   //交到指定页面，反之则不能，且只能实现所输入的结果
  return true;
}

 注：{  return false  }为阻止表单提交，但如果整体代码无错，{ return true ｝则通过，提交表单。

效果：

账号和密码获取/失去焦点演示：

// 账号获取焦点事件
   document.getElementById('zh').onfocus = function() {
// let = zh = this.value;
this.nextElementSibling.innerHTML = "";
   }
   // 账号失去焦点事件
   document.getElementById('zh').onblur = function() {
let = zh = this.value;
let f = zh.length == 0;
console.log(zh);
this.nextElementSibling.innerHTML = f ? "×" : "√";
// this.nextElementSibling.style.display=f?"block":"none";
   }
   // 密码获取焦点事件
   document.getElementById('mm').onfocus = function() {
// let = zh = this.value;
this.nextElementSibling.innerHTML = "";
   }
   // 密码失去焦点事件
   document.getElementById('mm').onblur = function() {
let = zh = this.value;
let f = zh.length == 0;
console.log(zh);
this.nextElementSibling.innerHTML = f ? "×" : "√";
// this.nextElementSibling.style.display=f?"block":"none";
   }

 注：注意看账号和密码的代码格式内容，两者设置的自定义不同，并非全部都是一样

效果：

 密码：

注:当内容存在焦点时则有判断，有内容则成立，无内容则错误，不成立，无法进行表单提交

正则表达式：

<!-- 正则表达式是用于对数据格式进行判断 -->
 <!-- 定义正则表达式： var rex = /^\d$\(\d表0-0的数字) -->
  
 <!-- 1.内容（以\开头） -->
 <!-- \d：表0-9的数字 -->
 <!-- \w：表0-9a-zA-Z_ -->      （非：不是，表示否定之意，这里注意）
 <!-- \D：表非0-9的数字 -->
 <!-- \W：表非0-9a-zA-Z -->
 <!-- .表任意一个单个字符 -->
  
 <!-- 2.字符出现速度 -->
 <!-- ?表0 or 一次 -->
 <!-- +表一次或者多次 -->
 <!-- *表0此或多次 -->
 <!-- \d{5}表五个数字 -->
 <!-- \d{5,10}表至低五个，至高十个 -->

 例：

// 例一：
     var rex = /^[A-Z]{1}\w{5,11}$/
      console.log(rex.test('Zking1234'));

效果：

 注：开头小写不成立，不满足；

例：

// // QQ号案例
     1184995259@qq.com
      var rex1 = /^\d{5,12}@qq.com$/
      console.log(rex.test('1136889226@qq.com'));

注:后面的  @qq.com  为固定值

以正则表达式为方法的登录界面：

注：（效果与表单验证同理，但是在其基础上用正则表达式的方式进行使用。）

<form "ff" action="">
     <h1>用户登录</h1>
     账号：<input type="text" id ="zh" /> <span></span> <br />
     密码：<input type="text" "mm" /><span></span> <br />
     <Button>登录</Button>
 </form>
 <input type="text" id ="mm1"  /><span></span>
 
document.getElementById("ff").onsubmit=function(){
  // 定义账号的验证规则
  var rex1 = /^[a-z]{5,10}$/
  // 定义密码 
  var rex2 = /^[a-z0-9A-Z.]{5,10}$/
   
  var username = rex1.test(zh.value);
  console.log(usernam);
  if(username){
      zh.nextElementSibling.style="color:blue";
      zh.nextElementSibling.innerHTML="对";
  }else{
      zh.nextElementSibling.style="color:green";
      zh.nextElementSibling.innerHTML="错";
  }
  var password = rex2.test(mm.value);
  console.log(password);
  if(password){
      mm.nextElementSibling.style="color:blue";
      mm.nextElementSibling.innerHTML="对";
  }else{
      mm.nextElementSibling.style="color:green";
      mm.nextElementSibling.innerHTML="错";
  }
  return username&&password;
     }

注：关键点：return username&&password;  

效果：

 注：未输入内容时的效果；

注：输入内容与为输入内容时的对照。

密码安全级别强度验证：

document.getElementById('mm1').onkeyup=function(){
     let c = 0;
     var rex1 = /^.*\d.*$/;  //包含数字
     var rex2 = /^.*[a-z].*$/; //包含字母
     var rex3 = /^.*[A-Z].*$/; //包含大写字母
     var rex4 = /^.*[@.].*$/; //包含特殊符号
     let m = this.value;
     if(rex1.test(m)){
  c++;
     }
     if(rex2.test(m)){
  c++;
     }
     if(rex3.test(m)){
  c++;
     }
     if(rex4.test(m)){
  c++;
     }
     let arr=['弱','中等','强','超强']
     if(m.length==0){
  this.nextElementSibling.innerHTML="";
     }else{
  this.nextElementSibling.innerHTML=arr[c-1];
     }
      
 }

效果：

释义：

let arr=['弱','中等','强','超强']
     if(m.length==0){
  this.nextElementSibling.innerHTML="";
     }else{
  this.nextElementSibling.innerHTML=arr[c-1];   《==
     }

注：c-1 ：由强至弱反向，由弱至强正向，

总结：希望本篇有关于JavaScript表单验证和正则表达式的知识点内容能对你带来一定的帮助，同时非常感谢各位大佬们的点赞与支持，咱们下一篇不见不散。

总结

到此这篇关于JavaScript表单及正则表达式验证的文章就介绍到这了,更多相关JS表单及正则表达式验证内容请继续浏览下面的相关文章！