表单验证 | 易学教程

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>表单验证</title>
	<style>
	.item{
	margin-top: 15px;
	}
	.letterSpace{
	letter-spacing: 2em;
	}
	input{
	width: 200px;
	height: 26px;
	transition: .5s
	}
	.err{
	font-size: 12px;
	color: red;
	}
	.register{
	border-radius: 10px;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<h3>表单提交验证</h3>
	<form action="#" method="post">
	<div class="item">
	<span class="letterSpace">姓</span>名：
	<input type="text" name="userName" id="userName">
	<span class="err"></span>
	</div>
	<div class="item">
	<span class="letterSpace">密</span>码：
	<input type="password" name="password" id="password">
	<span class="err"></span>
	</div>
	<div class="item">
	确认密码：
	<input type="password" name="confrimPWD" id="confrimPWD">
	<span class="err"></span>
	</div>
	<div class="item">
	<span class="letterSpace">生</span>日：
	<input type="date" name="birthday" id="birthday">
	<span class="err"></span>
	</div>
	<div class="item">
	电话号码：
	<input type="tel" name="tel" id="tel">
	<span class="err"></span>
	</div>
	<div class="item">
	家庭住址：
	<input type="text" name="address" id="address">
	<span class="err"></span>
	</div>
	<div class="item">
	<button class="register">用户注册</button>
	</div>
	</form>
	<script>
	// 获取DOM元素
	let form = document.forms[0];
	let err = document.getElementsByClassName("err");
	let input = document.getElementsByTagName("input");
	/* ------------------------------------------------------------------*/
	// 用户名焦点事件
	let userNameholder = function(){
	this.setAttribute("placeholder","以字母开头，长度为4-11位");
	this.style.width = 250 + "px";
	}
	// 用户名验证
	let userNameCheck = function(){
	this.setAttribute("placeholder","");
	let reg = /^[A-Za-z]\w{3,10}$/;
	if(reg.test(userName.value) \|\| userName.value === "")
	{
	err[0].innerHTML = "";
	}
	else{
	err[0].innerHTML = "用户名必须由字母开头，长度为4-11位";
	}
	// 如果输入框里面没有内容，要将长度还原
	if(userName.value === "")
	{
	this.style.width = 200 + "px";
	}
	}
	userName.addEventListener("focus",userNameholder,false);
	userName.addEventListener("blur",userNameCheck,false);
	/* ------------------------------------------------------------------*/
	// 密码焦点事件
	let passwordholder = function(){
	this.setAttribute("placeholder","密码长度为6-30位");
	this.style.width = 250 + "px";
	}
	// 验证密码事件
	let passwordCheck = function(){
	this.setAttribute("placeholder","");
	let reg = /^\w{6,30}$/;
	if(reg.test(password.value) \|\| password.value==="")
	{
	err[1].innerHTML = "";
	}
	else{
	err[1].innerHTML = "密码长度最少6位，最多30位组成";
	}
	// 如果输入框里面没有内容，要将长度还原
	if(password.value === "")
	{
	this.style.width = 200 + "px";
	}
	}
	password.addEventListener("focus",passwordholder,false);
	password.addEventListener("blur",passwordCheck,false);
	/* ------------------------------------------------------------------*/
	// 二次密码焦点事件
	let confrimPWDholder = function(){
	this.setAttribute("placeholder","请再次输入您的密码");
	this.style.width = 250 + "px";
	}
	// 二次密码验证事件
	let confrimPWDCheck = function(){
	this.setAttribute("placeholder","");
	if(confrimPWD.value === "" \|\| confrimPWD.value === password.value)
	{
	err[2].innerHTML = "";
	}
	else{
	err[2].innerHTML = "两次输入的密码不一致";
	}
	// 如果输入框里面没有内容，要将长度还原
	if(confrimPWD.value === "")
	{
	this.style.width = 200 + "px";
	}
	}
	confrimPWD.addEventListener("focus",confrimPWDholder,false);
	confrimPWD.addEventListener("blur",confrimPWDCheck,false);
	/* ------------------------------------------------------------------*/
	// 生日
	let birthlonger = function(){
	this.style.width = 250 + "px";
	}
	let birthshort = function(){
	if(birthday.value === "")
	{
	this.style.width = 200 + "px";
	}
	}
	birthday.addEventListener("focus",birthlonger,false);
	birthday.addEventListener("blur",birthshort,false);
	/* ------------------------------------------------------------------*/
	// 电话号码焦点事件
	let telholder = function(){
	this.setAttribute("placeholder","请填写您的手机号码");
	this.style.width = 250 + "px";
	}
	let telCheck = function(){
	let content = parseInt(tel.value);
	this.setAttribute("placeholder","");
	let reg = /^1[3578]\d{9}$/;
	if(reg.test(content) \|\| tel.value === "")
	{
	err[4].innerHTML = "";
	}
	else{
	err[4].innerHTML = "电话号码格式不正确";
	}
	// 如果输入框里面没有内容，要将长度还原
	if(tel.value === "")
	{
	this.style.width = 200 + "px";
	}
	}
	tel.addEventListener("focus",telholder,false);
	tel.addEventListener("blur",telCheck,false);
	/* ------------------------------------------------------------------*/
	// 家庭地址焦点事件
	let addressholder = function(){
	this.setAttribute("placeholder","请填写您的家庭地址");
	this.style.width = 250 + "px";
	}
	let addressCheck = function(){
	this.setAttribute("placeholder","");
	if(address.value === "")
	{
	this.style.width = 200 + "px";
	}
	}
	address.addEventListener("focus",addressholder,false);
	address.addEventListener("blur",addressCheck,false);
	/* ------------------------------------------------------------------*/
	// 提交验证

	form.onsubmit = function(){
	if(password.value !== confrimPWD.value)
	{
	err[2].innerHTML = "两次输入的密码不一致";
	}
	for(let i=0;i<input.length;i++)
	{
	if(input[i].value === "")
	{
	alert("有内容还没有填写");
	return false;
	}
	}
	for(let i=0;i<err.length;i++)
	{
	if(err[i].innerHTML !== "")
	{
	alert("请正确填写内容");
	return false;
	}
	}
	alert("表单提交成功");
	return true;
	}
	</script>
	</body>
	</html>

来源：https://www.cnblogs.com/qilin0/p/11512339.html

标签

placeholder

表单验证