JavaScript实现校验表格

最新推荐文章于 2023-05-18 13:55:24 发布

南归.

最新推荐文章于 2023-05-18 13:55:24 发布

阅读量214

点赞数 1

文章标签： JavaScript实现校验表格

本文链接：https://blog.csdn.net/weixin_44439442/article/details/87791948

版权

本文详细介绍了如何利用JavaScript来实现网页表格中的数据验证，包括输入格式检查、空格检查、数字范围验证等，旨在提高用户输入数据的准确性和一致性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style type="text/css">
    	input{margin-top: 10px;}
    	span{font-size: 12px;color:red;display: none;}
    	.one{width: 80px;height: 25px;background: #d1d1d1;border: none;border: 1px solid #ccc;border-radius: 2px;}
		.two{width: 80px;height: 25px;background: skyblue;border: none;border: 1px solid #ccc;border-radius: 2px;}
    </style>
</head>
<body>
	<form action="success.html" method="get" onsubmit="return filter()">
		<label>用&nbsp;户&nbsp;名&nbsp;&nbsp;：<input type="text" id="txt-name"><span id="tip-name">*用户名为8-12位数字和字母(不能使用数字开头)</span></label><br>
		<label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" id="txt-pwd"><span id="tip-pwd"> *密码为6位数字</span></label><br>
		<label>确认密码：<input type="password" id="txt-pwd1"><span id="tip-pwd1">*两次输入的密码不一致</span></label><br>
		<label>手机号码：<input type="text" id='txt-tel'><span id='tip-tel'>*手机号码不正确</span></label><br>
		<label><input type="checkbox" id="cbx">同意《xxxxx安保协议》</label><br>
		<label><input type="submit" value="注册" disabled id="sub"></label>
    </form>
	<script type="text/javascript">
		var cbx=document.getElementById('cbx');
		var sub=document.getElementById('sub');
        var txtname=document.getElementById('txt-name');
        var tipname=document.getElementById('tip-name');
        var txtpwd=document.getElementById('txt-pwd');
        var tippwd=document.getElementById('tip-pwd');
        var txtpwd1=document.getElementById('txt-pwd1');
        var tippwd1=document.getElementById('tip-pwd1');
        var txtTel=document.getElementById('txt-tel');
        var tipTel=document.getElementById('tip-tel');
		setCbx(cbx);//页面加载时，根据复选框状态设置按钮状态

		//复选框改变事件
		cbx.onchange=function(){
           setCbx(this);
		}
        
        //设置复选框
		function setCbx(obj){
			//判断  若为勾中，则提交按钮
           if(obj.checked){
             sub.className='two';
             sub.disabled=false;
           }else{
           	 sub.className='one';
           	 sub.disabled=true;
           }
		}

		//校验表单数据
		function filter(){
			//分别校验用户名、密码、手机号码
           return filterUname()&&filterpwd()&&filterTel();
		}
        
        //校验用户名
        function filterUname(){
           var sName=txtname.value;
           var p=/^[a-zA-Z]\w{7,11}$/;
           //校验不通过
           if(!p.test(sName)){
           	  tipname.style.display='inline-block';
           	  txtname.focus();//获取焦点
           	  return false;
           }
           return true;
        }

        //校验密码
        function filterpwd(){
           var pwd=txtpwd.value;//读取输入框值
           var p=/^\d{6}$/;

           var pwd1=txtpwd1.value;

           //校验密码
           if(!p.test(pwd)){
           	 tippwd.style.display='inline-block';
           	 txtpwd.focus();
           	 return false;
           }
            
           //两次密码是否一致
           if(pwd!=pwd1){
           	  tippwd1.style.display='inline-block';
           	  txtpwd1.focus();
           	  return false;
           }

           return true;
        }

        //校验手机号码
        function filterTel(){
            var tel=txtTel.value;
            var p=/^1\d{10}$/;
            if(!p.test(tel)){
            	tipTel.style.display='inline-block';
            	txtTel.focus();
            	return false;
            }
        	return true;
        }
	</script>
</body>
</html>