JavaScript中表单代码模型-----验证提交的用户名-CSDN博客

本文链接：https://blog.csdn.net/qq_42284554/article/details/109045486

前言

一、验证用户名的代码模型

1.HTML部分的代码

<body>
	<form action="../html/test.html" method="post" onsubmit=" return validate()">
		<span>请输入邮箱账号：</span>
		<input type="text" name="email" id="email" value ="" class="init" οnblur="valiEmaildate()">
        <span id=emailMsg></span><br>
        <button type = "submit">提交</button>
	</form>
</body>

2.css样式表

.init{
		background:#ccc;
		border:1px #000 solid;
	}
	.right{
		background:#ccc;
		border:1px #0f0 solid;
	}
	.wrong{
		background:#ccc;
		border:1px #f00 solid;
	}

3.JavaScript部分的代码

function valiEmaildate(){
		var input = document.getElementById("email");
		var emailMsg = document.getElementById("emailMsg");
		if(/^\w+@\w+\.\w+$/.test(input.value)){
			input.className = "right";
			emailMsg.innerHTML = "<font color = 'green'>输入正确</font>";
			return true;
		}else{
			input.className = "wrong";
			emailMsg.innerHTML = "<font color = 'red'>输入错误</font>";
			return false;
		}
	}
	function validate(){
		return valiEmaildate();
	}

总结：记录常用的几个知识点：

1、修改元素的class属性----> 元素.className:“新class属性”；
2、失去焦点事件：onblur；获得焦点事件：onfocus；表单提交事件：onsubmit；
3、js中正则表达式：/^ 正则表达式 &/.test(比较的内容)；
4、在使用onsubmit接受函数返回时，加上“return”，否则无法正常接受，如：