表单验证
Posted zhouqingfeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单验证相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
用户名：<input type="text" id="user"><span></span><br>
密码：<input type="text" id="pass"><span></span><br>
重复密码：<input type="text" id="pass2"><span></span><br>
<input type="button" value="提交" id="btn">
</body>
<script>
var ouser = document.getElementById("user");
var opass = document.getElementById("pass");
var opass2 = document.getElementById("pass2");
var obtn = document.getElementById("btn");
// 提前定义每个输入框的成功状态：false为失败，true为成功
var u = p = p2 = false;
// 用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
ouser.onblur = function(){
var reg = /^[u2E80-u9FFFw-]{4,20}$/;
if(reg.test(this.value)){
this.nextElementSibling.innerHTML = "用户名成功";
u = true;
}else{
this.nextElementSibling.innerHTML = "用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符";
u = false;
}
}
// 数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
opass.onblur = function(){
// 提前定义每种类型的状态：0为没有，1为出现
var a=b=c=0;
// 是否出现数字a
var aReg = /d/;
if(aReg.test(this.value)){
a = 1;
}
// 是否出现字母b
var bReg = /[a-zA-Z]/;
if(bReg.test(this.value)){
b = 1;
}
// 是否出现特殊c
var cReg = /[W]/;
if(cReg.test(this.value)){
c = 1;
}
// 状态累加之后，判断总和，判断难度类型
switch(a+b+c){
case 1:
this.nextElementSibling.innerHTML = "简单";break;
case 2:
this.nextElementSibling.innerHTML = "一般";break;
case 3:
this.nextElementSibling.innerHTML = "困难";break;
}
p = true;
// 在第一次输入密码时，只要重复密码不为空，都做重复密码的验证
if(opass2.value == "") return;
if(this.value === opass2.value){
opass2.nextElementSibling.innerHTML = "一致";
p2 = true;
}else{
opass2.nextElementSibling.innerHTML = "不一致";
p2 = false;
}
}
opass2.onblur = function(){
if(this.value === opass.value){
this.nextElementSibling.innerHTML = "一致";
p2 = true;
}else{
this.nextElementSibling.innerHTML = "不一致";
p2 = false;
}
}
obtn.onclick = function(){
// 提交时，判断所有输入框的状态必须全为true
if(u && p && p2){
alert("ok")
}else{
// 只要有一个不为true，都单独判断，找到真正的错误
if(!u){
alert("用户名error")
}
if(!p){
alert("密码error")
}
if(!p2){
alert("重复密码error")
}
}
}
</script>
</html>
以上是关于表单验证的主要内容，如果未能解决你的问题，请参考以下文章