js的form表单验证码和封装校验

最新推荐文章于 2021-10-14 14:48:35 发布

原创最新推荐文章于 2021-10-14 14:48:35 发布 · 680 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

JS 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用JavaScript进行表单验证的方法，并提供了一个简单的验证码生成示例。通过自定义函数实现对输入字段的数据有效性检查，确保用户提交的数据符合预设规则。

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

验证码生成

	<script type="text/javascript">
		function testCode(){
			var code=Math.floor(Math.random()*9000+1000);
			var span=document.getElementById("code");
			span.innerHTML=code;
		} 
	</script>

form表单的封装校验

	<script type="text/javascript">
		function testSub(){
			return testField("pwd",/^[a-z]\w{5,7}$/);
		}
		//封装校验:相同的保留,不同的传参
		function testField(id,reg){
			//获取用户数据
			var inp=document.getElementById(id);
			var va=inp.value;
			var alt=inp.alt;
			//创建校验规则
			//获取span对象
			var span=document.getElementById(id+"Span");
			//开始校验
			if(va==""||va==null){
				//输出校验结果
				span.innerHTML=alt+"不能为空";
				span.style.color="red";
				return false;
			}else if(reg.test(va)){
				span.innerHTML=alt+"ok";
				span.style.color="green";
				return true;
			}else{
				span.innerHTML=alt+"不符合规则";
				span.style.color="red";
				return false;
			}
		}
		function testAgree(){
			document.getElementById("sub").disabled=!document.getElementById("che").checked;
			
		}
		function testOnsubmit(){
			return testSub();
		}
	</script>


	<form action="#" method="get" onsubmit="return testOnsubmit()">
		<input type="text" name="pwd" id="pwd" value="" onblur="testSub()" alt="密码"/>
		<span id="pwdSpan"></span><br/>
		<br /><br />
		<input type="checkbox" name="che" id="che" onclick="testAgree()"/>是否同意本公司协议
		<input type="submit" name="sub" id="sub" value="提交" disabled="disabled"/>
	</form>