今天我要介绍的是在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";
}
注：注意看账号和密码的代码格式内容，两者设置的自定义不同，并非全部都是一样
效果：
密码：
注:当内容存在焦点时则有判断，有内容则成立，无内容则错误，不成立，无法进行表单提交
正则表达式：
（非：不是，表示否定之意，这里注意）
例：
// 例一：
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 为固定值
以正则表达式为方法的登录界面：
注：（效果与表单验证同理，但是在其基础上用正则表达式的方式进行使用。）
用户登录
账号：
密码：
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表单及正则表达式验证内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
