前端表单验证总结

前言：自己正在学习前端基础，学完了想做一个综合性的项目验证自己所学，在做这个项目的过程中也学到了很多其他的。
项目简述：做一个用户注册界面，采用HTML+CSS+JS对用户填写的信息做一个简单的验证并给出相应提示/警告信息。
在每一项只展示当前用到的部分代码完整代码在文章末给出
1.文本输入框对齐
在文本输入框前加一个label 并且把他的长度设为一个定值（根据你的文本输入框前的信息而定）右对齐
如下：

.K{ float: left; width: 10em; margin-right: 1em; text-align: right; }

<label class="K">通行证用户名：</label><input type="text" id="name" name="name"  onfocus="remind(txz.name)" onblur="user_name(txz.name)">

效果如图：在这里插入图片描述

2.文本框后面给出提示信息
之前用表格写的时候，分成三列，中间加一个文本框，最后一列加一个空label 命名一个ID 触发时间之后通过document.getElementById("").innerHTML="";的方式,这次用表单写发现不行。尝试了一下子div 发现可以。

//我是先用style 规定他的提示信息在同一行 不跨行
.D{display: inline}

<input type="password" id="mm"  onFocus="remind(txz.mm)" onBlur="user_password(txz.mm)"><div id="wrongmessagemm" class="D"></div><br><br>
// js里这样写  至于ID为什么填这个 后面会提到
document.getElementById(as).innerHTML="用户名长度大于4小于10,不可以有特殊符号";

效果入图：

3.js函数传参以及封装性
与Java c等语言同的是：在JS函数里的形参不用规定类型他就直接是HTML句柄中写的东西。
比如：

<label class="K">通行证用户名：</label><input type="text" id="name" name="name"  onfocus="remind(txz.name)" onblur="user_name(txz.name)">@163.com<div id="wrongmessagename" class="D"></div><br><br>
//命名每个提示框后面的div为输入框“wrongmessage”+ID  这样就可以封装一个函数实现对每个文本框监测

function remind(target1){                //参数可以随便命名
		var as="wrongmessage"+target1.id;   //获取后面提示信息所用的div的ID
		var h=user_name(target1);    //h用来接收函数返回值
		switch(target1.id){
			case "name":	
					if(h===0)    //这个是对用户输入内容检测  如果输入格式不对执行这个
					document.getElementById(as).innerHTML="用户名长度大于4小于10,不可以有特殊符号";
					if(h===1)
					document.getElementById(as).innerHTML="输入正确";
					break;

注意的是在另一个函数调用这个函数的返回值的时候要用一个var 接收不可以直接写

4.在JS中改变输入框/按钮属性状态
1.采用document.getElementById(“sm”).Attribute(“disabled”，“true”);
obj.Attribute(“属性名”,“状态”)
2.直接给那个文本框/按钮赋值

//在这里是设置提交按钮不可点
document.getElementById("submit").disabled=false;   测试  这里的false不可以加双引号

5.完整代码
HTML部分代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网易通行证</title>
<style type="text/css">
	table { border-color:#b6ff00; border-collapse: collapse;}
	#kt{font-family: "楷体";color: #793BB3}
	.K{ float: left; width: 10em; margin-right: 1em; text-align: right; }
	.D{display: inline}
</style>
<script type="text/javascript" src="Untitled-1.js"></script>
</head>

<body>
	<h1 align="center" id="kt" >网易通行证</h1>
	<table border="1" align="center">
		<tr><td><form id="txz" name="txz" method="post" action="">
		    <label class="K">通行证用户名：</label><input type="text" id="name" name="name"  onfocus="remind(txz.name)" onblur="user_name(txz.name)">@163.com<div id="wrongmessagename" class="D"></div><br><br>
			
			<label class="K">登录密码：</label><input type="password" id="mm"  onFocus="remind(txz.mm)" onBlur="user_password(txz.mm)"><div id="wrongmessagemm" class="D"></div><br><br>
			
			<label class="K">重复登录密码：</label><input type="password" id="sm" onFocus="remind(txz.sm)" onBlur="check(txz.sm)" disabled="disabled"><div id="wrongmessagesm" class="D"></div><br><br>
			
			<label class="K">性别：</label><input type="radio" name="RadioGroup1" value="男" id="RadioGroup1_0">
			    男
			    <input type="radio" name="RadioGroup1" value="女" id="xb">
			    女
			  <br><br>
			
			<label class="K">真实姓名：</label><input type="text" id="realname" onFocus="remind(txz.realname)"><div id="wrongmessagerealname" class="D"></div><br><br>
			
			<label class="K">昵称：</label><input type="text" id="wyname" onFocus="remind(txz.wyname)"><div id="wrongmessagewyname" class="D"></div><br><br>
			
			<label class="K">关联手机号：</label><input type="text" id="phone" onFocus="remind(txz.phone)" onBlur="pnumber(txz.phone)"><label id="wrongmessagephone"></label><br><br>
			
			<label class="K">保密邮箱：</label><input type="text" id="Email" onFocus="remind(txz.Email)" onBlur="email_check(txz.Email)"><div id="wrongmessageEmail" class="D"></div><br><br>
			
		  	<center><input type="submit" id="submit" value="注册" disabled="true"></center>
			</form></td></tr>
	</table>
	
</body>
</html>

JS部分代码

// JavaScript Document
	function remind(target1){                //参数可以随便命名
		var as="wrongmessage"+target1.id;   //获取后面提示信息所用的div的ID
		var h=user_name(target1);
		var j=pnumber(target1);
		var m=user_password(target1);
		var e=email_check(target1);
		var c=check(target1);
		//document.getElementById("submit").disabled=false;   测试  这里的false不可以加双引号 
		switch(target1.id){
			case "name":	
					if(h===0)
					document.getElementById(as).innerHTML="用户名长度大于4小于10,不可以有特殊符号";
					if(h===1)
					document.getElementById(as).innerHTML="输入正确";
					break;
			case  "mm":
					if(m===0)
					document.getElementById(as).innerHTML="密码不可以有特殊符号，且长度在6-14之间";
					if(m===1)
					{
						 document.getElementById("sm").removeAttribute("disabled");
					document.getElementById(as).innerHTML="输入格式正确";}
					break;
			case "sm":
					if(c===0)
					document.getElementById(as).innerHTML="请重复密码 ";
					if(c===1)
					document.getElementById(as).innerHTML="ok";
					break;
			case "realname":
					document.getElementById(as).innerHTML="请输入真实姓名";
					break;
			case "wyname":
					document.getElementById(as).innerHTML="给自己想一个昵称吧";
					break;
			case "phone":
					if(j===0)
					document.getElementById(as).innerHTML="输入手机号以便接受验证码";
					if(j===1)
					document.getElementById(as).innerHTML="输入正确";
					break;
			case "Email":
					if(e===0)
					document.getElementById(as).innerHTML="填写常用的个人邮箱(163邮箱)";
					if(e===1)
					document.getElementById(as).innerHTML="正确输入";
					break;
		}
		if(h===1&&m===1&&e===1&&j===1&&c===1)
		document.getElementById("submit").disabled=false;
	}	
//检查手机号格式                                         完成
function pnumber(target)
{
 var as="wrongmessage"+target.id;
 //alert(target.value.length);
	if(target.value.length===11)
	{
		for(let i=0;i<11;i++)
		{
			if(target.value.charCodeAt(i)<48||target.value.charCodeAt(i)>58)
			{
				document.getElementById(as).innerHTML="手机号必须为纯数字";
				return 0;
			}
		}
		document.getElementById(as).innerHTML="正确输入";
		return 1;
	}
	else
	{
		document.getElementById(as).innerHTML="手机号长度错误";
		return 0;
	}
}	
//判断用户名                                               完成
function user_name(tt)
{
	var as="wrongmessage"+tt.id;
	var a=firstcode(tt.value,0);
	var b=strlength(tt,4,20);                //必须设置一个值接收函数返回值
	if(a===0)
	{
		document.getElementById(as).innerHTML="要以数字或字母开头";
		return 0;
	}
	else
	{
		if(b===0)
		{
			document.getElementById(as).innerHTML="长度要在4,20之间";
			return 0;
		}
		document.getElementById(as).innerHTML="正确输入";
		return 1;
	}
}
//判断密码 长度在6到14之间 仅仅为数字或字母                        完成
function user_password(pa)
{
	var as="wrongmessage"+pa.id;
	var a=special(pa.value,pa.value.length);
	var b=strlength(pa,6,14); 
	var l=pa.value.length;
	if(b===0)
	{
		document.getElementById(as).innerHTML="长度要在6,14之间";	
		return 0;
	}
	else
	{
		if(a===0)
			{
				document.getElementById(as).innerHTML="密码仅可为数字或字母";
				return 0;
			}
		document.getElementById(as).innerHTML="正确输入";
		document.getElementById("sm").removeAttribute("disabled");
		return 1;
	}
}
//判断验证密码是否与密码一致
function check(str1)
{
	var as="wrongmessage"+str1.id;
	var str2=document.getElementById("mm").value;
	if(str1.value==str2)
		{
			document.getElementById(as).innerHTML="正确输入";
			return 1;
		}
	else
		{
			document.getElementById(as).innerHTML="与原密码不符";
			return 0;
		}
}
//判断邮箱格式 @之前必须为数字字母   @以后为@163.com
function email_check(target2)
{
	var as="wrongmessage"+target2.id;
	var f=target2.value.indexOf("@");
	var s=special(target2.value,f);
	var str=target2.value.substring(f,target2.value.length);
	if(s===0)
		{
			document.getElementById(as).innerHTML="邮箱组成仅为字母数字@.";
			return 0;
		}
	else
		{
			if(str=="@163.com")
				{
					document.getElementById(as).innerHTML="正确输入";
					return 1;
				}
			else
				{
					document.getElementById(as).innerHTML="必须以@163.com结尾";
					return 0;
				}
		}
}
//判断字符串长度
function strlength(target,min,max)
{
	if(target.value.length<min||target.value.length>max)
		return 0;
	else
		return 1;
}
//验证首字母
function firstcode(str,i)
{
	if(str.charCodeAt(i)>=48&&str.charCodeAt(i)<=57)
		return 1;
	else if(str.charCodeAt(i)>=65&&str.charCodeAt(i)<=90)
		return 1;
	else if(str.charCodeAt(i)>=97&&str.charCodeAt(i)<122)
		return 1;
	else
		return 0;
}
//判断有无特殊字符  若有 则返回0  若无 则返回1
function special(str1,th)          //th为第几位 判断到这个数组的第几位
{
	for(let i=0;i<th;i++)
			{
				if(firstcode(str1,i)===0)
				{
					
					return 0;
				}
				return 1;
			}
}

来源：CSDN

作者：I_wtf

链接：https://blog.csdn.net/I_wtf/article/details/103620616

标签

表单验证