JavaScript表单验证和提交(结合正则表达式)

最新推荐文章于 2025-05-04 15:41:37 发布

彪仔zjj

最新推荐文章于 2025-05-04 15:41:37 发布

阅读量3.5k

点赞数

分类专栏：源代码文章标签：表单 javascript 正则表达式 html 密码

本文链接：https://blog.youkuaiyun.com/java_xxoo_android/article/details/41789535

版权

源代码专栏收录该内容

2 篇文章

订阅专栏

表单验证：
1> 在用户输入信息完成后，验证用户数据的数据是否符合某个要求，根据是否符合要求，提示不同的信息。
2>若用户输入的信息有一项不合格，则阻止表单提交。(注意:表单组件name属性值为非空时表单递交才能将组件的value值传出去.

所以一般添加表单组件时最好加上name属性,给组件一个名字,以便于表单提交传值成功)

3>如何阻止表单的提交：
<form action="xxx" οnsubmit="return false;">
</form>

实例:

希望实现如下界面效果:

源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js02.html</title>
<script type="text/javascript">
function checkName(){
	//1. 获取文本框的值 
	var name=document.getElementById("name").value;
	//2. 验证格式是否合法
	//3. 根据不同的验证结果  提示不同的信息
	var span=document.getElementById("name_msg");
	//使用正则表达式验证 
	var exp=/^\w{8,15}$/;
	if(exp.test(name)){
		//合格
		span.style.color="green";
		span.innerHTML="格式正确";
		return true;
	}else{
		//不合格
		span.style.color="red";
		span.innerHTML="格式错误(单词字符[8,15])";
		return false;
	}
}

function checkPwd(){
	//1. 获取文本框的值 
	var pwd=document.getElementById("pwd").value;
	//2. 验证格式是否合法
	//3. 根据不同的验证结果  提示不同的信息
	var span=document.getElementById("pwd_msg");
	var exp=/^\d{6}$/;
	if(exp.test(pwd)){
		//合格
		span.style.color="green";
		span.innerHTML="格式正确";
		return true;
	}else{
		//不合格
		span.style.color="red";
		span.innerHTML="格式错误(6位数字)";
		return false;
	}
}
function checkForm(){
	return checkName() && checkPwd();
}
</script>
</head>
<body>
	<h1>登录</h1>
	<form action="login.do"  οnsubmit="return checkForm();">
		账号：<input οnblur="checkName()" type="text"  id="name" />
		<span id="name_msg"></span>
		<br/><br/>
		密码：<input οnblur="checkPwd()" type="password" id="pwd"/>
		<span id="pwd_msg"></span>
		<br/><br/>
		<input type="submit" value="登录"/>
	</form>
</body>
</html>