表单通用JS验证(可配置)

最新推荐文章于 2022-02-21 19:25:20 发布

最新推荐文章于 2022-02-21 19:25:20 发布 · 200 阅读

文章标签：

#JavaScript #J# #HTML #ViewUI

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的HTML表单验证方法，通过JavaScript实现对用户名、密码、邮箱及电话号码的空值检查、长度限制和格式验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Html中配置方法如下 :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<script type="text/javascript" src="util.js"></script>
		<script type="text/javascript">
	var checknNames = [ "userName", "pwd", "email", "phone" ];
	var descriptions = [ "用户名", "密码", "邮箱地址", "电话号码" ];
	var checkNulls = [ "notnull", "notnull", "notnull", "notnull" ];
	var checkTypes = [ "", "", "email", "phone" ];
	var checkLengths = [ "8", "6", "20", "30" ];

	function clickSubmit() {
		checkForm();
	}

	function checkForm() {
		if (!checkFormNotNull("inputForm", checknNames, descriptions,
				checkNulls))
			return false;
		if (!checkFormLength("inputForm", checknNames, descriptions,
				checkNulls, checkLengths))
			return false;
		if (!checkFormType("inputForm", checknNames, descriptions, checkTypes))
			return false;
	}
</script>
	</head>
	<body>
		<form id="inputForm" name="inputForm" action="" method="post">
			<input id="userName" name="userName" type="text" value="" />
			<input id="pwd" name="pwd" type="password" value="" />
			<input id="email" name="email" type="text" value="" />
			<input id="phone" name="phone" type="text" value="" />
			<input type="button" value="提交" onclick="clickSubmit()" />
		</form>
	</body>
</html>

JS验证函数

//根据表单ID验证空值
function checkFormNotNull(formId, checknNames, descriptions, checkNulls) {
	var form = document.getElementById(formId);
	var elements = form.elements;
	for (i = 0; i < checknNames.length; i = i + 1) {
		var element = elements(checknNames[i]);
		var description = descriptions[i];
		var checkType = checkNulls[i];
		if (checkType == "" || checkType == "notnull") {
			if (element.value == "") {
				alert(description + "不能为空!");
				return false;
			}
		}
	}
	return true;
}

// 根据表单ID验证长度
function checkFormLength(formId, checknNames, descriptions, checkNulls,
		checkLengths) {
	var form = document.getElementById(formId);
	var elements = form.elements;
	for (i = 0; i < checknNames.length; i = i + 1) {
		var element = elements(checknNames[i]);
		var description = descriptions[i];
		var checkNull = checkNulls[i];
		var checkLength = checkLengths[i];
		if (element.type == "text" || element.type == "password") {
			if (checkNull == "" || checkNull == "notnull") {
				var lengths = getInputLengths(element);
				if (lengths > checkLength) {
					alert(description + "长度不能超过" + checkLength + "字符!");
					return false;
				}
			}
		}
	}
	return true;
}

// 根据表单ID验证类型
function checkFormType(formId, checknNames, descriptions, checkTypes) {
	var form = document.getElementById(formId);
	var elements = form.elements;
	for (i = 0; i < checknNames.length; i = i + 1) {
		var element = elements(checknNames[i]);
		var description = descriptions[i];
		var checkType = checkTypes[i];
		if (element.type == "text" || element.type == "password") {
			if (checkType == "email") {
				var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if (regExp.test(element.value) == false) {
					alert(description + "输入不合法!");
					return false;
				}
			}
			if (checkType == "phone") {
				var regExp = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
				if (regExp.test(element.value) == false) {
					alert(description + "输入不合法!");
					return false;
				}
			}
			if (checkType == "cardId") {
				var regExp = "";
				if (regExp.test(element.value) == false) {
					alert(description + "输入不合法!");
					return false;
				}
			}
		}
	}
	return true;
}

// 计算输入框字符数
function getInputLengths(obj) {
	var vname = obj.value;
	var count = 0;
	for (j = 0; j < vname.length; j = j + 1) {
		if (vname.charCodeAt(i) > 256) {
			count = count + 2;
		} else {
			count = count + 1;
		}
	}
	return count;
}