原生javaScript form表单数据验证

最新推荐文章于 2023-06-15 17:29:04 发布

qq_1534741136

最新推荐文章于 2023-06-15 17:29:04 发布

阅读量367

点赞数 2

分类专栏： javaScript

本文链接：https://blog.csdn.net/qq_39008487/article/details/96963376

版权

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form id="form1" name="form1">
		<input type="" name="name" value="z">
		<input type="" name="age" value="8">
		<input type="submit" name="submit">
	</form>
	<form id="form2" name="form2">
		<input type="" name="width" value="">
		<input type="" name="height" value="">
		<input type="submit" name="submit">
	</form>
</body>
<script type="text/javascript">
	var forms = document.forms;
	var form1 = forms.form1;
	var form2 = forms.form2;

	var rule1 = {
		name:{
			tipsMsg:'请输入姓名',
			verification:function(value,el){
				if(value === ''){
					return true;
				}
			}
		},
		age:{
			tipsMsg:'请输入年龄为20-40',
			verification:function(value,el){
				value = parseInt(value);
				if(value < 20 || value > 40){
					return true;
				}
				return false;
			}
		}
	};

	var rule2 = {
		width:{
			tipsMsg:'请输入宽度',
			verification:function(value,el){
				if(value === ''){
					return true;
				}
			}
		},
		height:{
			tipsMsg:'请输入宽度高 必须为160-190',
			verification:function(value,el){
				value = parseInt(value);
				if(value < 160 || value > 190){
					return true;
				}
				return false;
			}
		}
	};

	function verification(el,rule){
		for(var name in rule){
			if(rule[name].verification(el[name].value)){
				alert(rule[name].tipsMsg);
				return false;
			}
		}
		return true;
	}


	form1.addEventListener('submit',function(){
		verification(this,rule1);
	},null)

	form2.addEventListener('submit',function(){
		verification(this,rule2);
	},null)
</script>
</html>

qq_1534741136

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生javaScript form表单数据验证

<!DOCTYPE html><html><head> <title></title></head><body> <form id="form1" name="form1"> <input type="" name="name" value="z"> <input ...
复制链接

扫一扫