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

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

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

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"; }

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

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

（非：不是，表示否定之意，这里注意）

 例：

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

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

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

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

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表单及正则表达式验证的文章就介绍到这了,更多相关JS表单及正则表达式验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一篇：Vue使用element plus组件的时间格式问题解

下一篇：在JS中删除对象的某个属性常见的几种方案总