form表单提交（非ajax提交）前表单校验

ゝ一世哀愁。 2021-10-13 02:59 681阅读 0赞

<form action="{:url('index/index/loginadd')}" method="post" >
    	<div class="userName">
    		<input type="text" placeholder="姓名" id="userName" name="userName" maxlength="20" autocomplete="off"/>
    	</div>
    	<div class="userName">
    		<input type="text" placeholder="配送地址" id="address" name="address" maxlength="20" autocomplete="off"/>
    	</div>
    	<div class="password">
    		<input type="password" placeholder="密码"  id="password" name="password" maxlength="12" autocomplete="off"/>
    	</div>
    	<div class="phoneNum">
    		<input type="text" placeholder="手机号"  id="phoneNum" name="phoneNum" maxlength="11" autocomplete="off"/>
    	</div>
    	<div class="referrerPhoneNum">
    		<input type="text" placeholder="推荐人手机号"   id="referrerPhoneNum" name="referrerPhoneNum" maxlength="11" autocomplete="off"/>
    	</div>
    
    	<div class="toRegister">
    		<button type="submit"  οnclick="return check()">注册</button>
    	</div>
    	<div class="hint" id="hint">
    
    	</div>
    	</form>

<script type="text/javascript">
        function check(form){
            var userName = document.getElementById("userName").value;
            var address = document.getElementById("address").value;
            var passsword = document.getElementById("password").value;
            var phoneNum = document.getElementById("phoneNum").value;
            var referrerPhoneNum = document.getElementById("referrerPhoneNum").value;
             if(userName == ""){
                document.getElementById("hint").innerHTML="<span>姓名不能为空</span>";
                document.getElementById("hint").style.display="block";
                setTimeout(function() {
                    document.getElementById("hint").style.display="none";
                }, 1000);
                return false;
            }
            if(address == ""){
                document.getElementById("hint").innerHTML="<span>配送地址不能为空</span>";
                document.getElementById("hint").style.display="block";
                setTimeout(function() {
                    document.getElementById("hint").style.display="none";
                }, 1000);
                return false;
            }
            if(passsword == ""){
                document.getElementById("hint").innerHTML="<span>密码不能为空</span>";
                document.getElementById("hint").style.display="block";
                setTimeout(function() {
                    document.getElementById("hint").style.display="none";
                }, 1000);
                return false;
            }
            if(phoneNum == ""){
                document.getElementById("hint").innerHTML="<span>手机号不能为空</span>";
                document.getElementById("hint").style.display="block";
                setTimeout(function() {
                    document.getElementById("hint").style.display="none";
                }, 1000);
                return false;
            }
            if(referrerPhoneNum == ""){
                document.getElementById("hint").innerHTML="<span>推荐人手机号不能为空</span>";
                document.getElementById("hint").style.display="block";
                setTimeout(function() {
                    document.getElementById("hint").style.display="none";
                }, 1000);
                return false;
            }
           return true;
        }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，681人围观）

还没有评论，来说两句吧...

相关阅读

相关 form表单提交和ajax表单提交的区别

form表单提交和ajax表单提交的区别： > 1.ajax在提交，请求，接收时，都是异步进行的，网页不需要刷新。 > from表单提交时是新建一个页面，哪怕是提交给自己

灰太狼/ 2023年05月22日 22:29/ 0 赞/ 26 阅读

相关 Ajax提交form表单

Ajax提交form表单 $.ajax({ //几个参数需要注意一下 type: "PO

╰+攻爆jí腚メ/ 2022年12月11日 04:21/ 0 赞/ 288 阅读

相关 form表单提交前验证

<form action="" method="post" id="login-form" onsubmit="return toVaild()"> <inp

清疚/ 2022年08月30日 11:57/ 0 赞/ 308 阅读

相关使用ajax提交form表单

function mySubmit(){ var chapter=$("myForm").serialize(); $.ajax({ typ

比眉伴天荒/ 2022年08月23日 03:48/ 0 赞/ 305 阅读

相关 Ajax提交Form表单

1. 背景在java后台开发中，经常要从前端向后台提交表单数据。利用Ajax进行Form表单提交，是很常用的方法。本文主要讲解Ajax提交表单的基本应用。 2. Ajax

迷南。/ 2022年07月21日 01:47/ 0 赞/ 349 阅读

相关 Form表单提交

1. JS源码提交： var form = document.getElementById('AddZookeeperForm'); form

深藏阁楼爱情的钟/ 2022年07月15日 01:42/ 0 赞/ 392 阅读

相关 Form表单提交

1. JS源码提交： var form = document.getElementById('AddZookeeperForm'); form

谁借莪１个温暖的怀抱￠/ 2022年07月15日 01:42/ 0 赞/ 414 阅读

相关 ajax提交form表单

var form=document.getElementById("inspectForm");//inspectForm为Form表单的ID var f

浅浅的花香味﹌/ 2022年05月22日 22:12/ 0 赞/ 338 阅读

相关 form表单提交（非ajax提交）前表单校验

<form action="{:url('index/index/loginadd')}" method="post" > <div class="userN

ゝ一世哀愁。/ 2021年10月13日 02:59/ 0 赞/ 682 阅读

相关 layui form 表单ajax 提交

layui.use(['form','jquery'],function(){ //var form = layui.form(),

港控/mmm°/ 2021年09月30日 02:42/ 0 赞/ 899 阅读