欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

用HTML5和JavaScript写一个简单的表单校验

程序员文章站 2022-04-24 12:33:52
...
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<style>
			span{color: red;font-size: 12px;display: none;}
			input{margin-top: 10px;}
			a{text-decoration:none;color: #000;}
		</style>
</head>
<body>
	<h2>用户注册</h2>
	<form action="0418.html" "return val()">
		<label for="">用&nbsp;&nbsp;户&nbsp;&nbsp;名：</label>
		<input type="text" id="texname"><span id="sp1">*用户名为8-12位字符</span><br>
		<label for="">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
		<input type="password" id="pas1"><span id="mm1">*密码为6位数字</span><br>
		<label for="">重复密码：</label>
		<input type="password" id="pas2"><span id="mm2">*两次输入的密码不一致</span><br>
		<label for="">手&nbsp;机&nbsp;&nbsp;号：</label>
		<input type="text" id="tex"><span id="sj">*手机号码不正确</span><br>
		<input type="checkbox" id="cbx"><a href="#">《同意xxx协议》</a><br>
		<input type="submit" value="提交" disabled id="sub">
	</form>
	<script type="text/javascript">
		var c=document.getElementById('cbx');
		var s=document.getElementById('sub');

		var t=document.getElementById('texname');
		var p1=document.getElementById('pas1');
		var p2=document.getElementById('pas2');
		var te=document.getElementById('tex');
		var s1=document.getElementById('sp1');
		var m1=document.getElementById('mm1')
		var m2=document.getElementById('mm2');
		var dhhm=document.getElementById('sj');
		//使提交后返回用户注册时提交事件仍为正常
		window.function(){
			s.disabled=!c.checked;//页面加载时 根据复选框状态 判断按钮状态
		}
		//协议事件
		cbx.function () {
			// if (this.checked) {
			// 	s.disabled=false;
			// }else{
			// 	s.disabled=true;
			// }
			s.disabled=!this.checked;//根据复选框状态来判断按钮状态
		}
		//进行表单校验
		function val(){
			return valname()&&valmm()&&valdh();
		}
		//进行用户名校验
		function valname(){
			var p=/^\w{8,12}$/;//用户名为8-12位字符
			//校验不通过
			if (!p.test(texname.value)) {
				sp1.style.display='inline-block';
				return false;
			}
			return true;
		}
		//校验密码
		function valmm(){
			var p=/^\d{6}$/;//密码为6位数字
			if(!p.test(pas1.value)){
				mm1.style.display='inline-block';
				return false;
			}
			//校验重复密码
			if(pas1.value!=pas2.value){
				mm2.style.display='inline-block';
				return false;
			}
			return true;
		}
		//校验电话
		function valdh(){
			var p=/^1\d{10}$/;
			if (!p.test(tex.value)) {
				sj.style.display='inline-block';
				return false;
			}
			return true;
		}
	</script>
</body>
</html>

运行结果如图：
用HTML5和JavaScript写一个简单的表单校验

上一篇： 安装 FreeBSD 12 设置 SSL 访问、编译 IPF 防火墙 内核编译

下一篇： 为了一张好看的手机壁纸，各手机厂商也是拼了

推荐阅读