js基础-表单验证和提交

原始提交如下:

<form action="/login" method="post" id="form1">
     <span>用户</span>
    <input type="text" name="username" id="username"/><br/>  
    <span>密码</span>
    <input type="password" name="password" id="passsword"/><br/>  
      
     <input type="submit" value="提交">    
</form>

说明:

form是一个表单,用来发送http请求。直观的说,只要用form将需要提交到服务器的标签包围,当提交的时候,就会向服务器发送有name属性的数据。所以,input内容提交必须有name属性。
action:服务器接口路径;
method:选择发送请求的方式,默认是get,通常用post。get请求会在地址栏显示参数,并且有长度限制。post则没有。
id:标识标签元素
当提交后,服务器就会得到:username=填的用户名 & password=填的密码
当点击提交后,form数据就会发送。通常提交前要校验数据。比如长度规则等。所以需要js。    
js校验:

  方法1:

      在from属性后面接着添加οnsubmit=”return false;”属性.表示不提交。true则相反。这里可以用一个方法替换。变成:
     

<form action="/back/login/login" method="post" id="form1" onsubmit="return sb1();">

然后,书写js验证规则:

function sb1(){
        var username = document.getElementById("username");
        var password = document.getElementById("passsword");
        if(trim(username.value)==null || trim(username.value)==""){
            alert("请输入用户名");
            username.focus();
            return false;
        }
        if(trim(password.value)==null || trim(password.value)==""){
            alert("请输入密码");
            password.focus();
            return false;
        }

        return true;
    }
    function trim(str){ //删除左右两端的空格
           return str.replace(/(^\s*)|(\s*$)/g, "");
    }

 js含义:

var username = document.getElementById(“username”);
表示获得id为username的标签对象,可以理解为输入用户名的那个输入框
username.value表示输入框的内容
trim是一个方法,去除字符串左右两端空格。
方法是一个串代码的执行体,调用方法会执行方法中的内容。方法又叫做函数,方法由方法名,括号中的参数,大括号中的方法体组成。在js中,方法参数不用声明类型,调用方法的时候,参数按照顺序匹配。比如,trim(username),username就是str,所以,方法中的参数str就是形式参数,简称形参,而username叫做实体参数,简称实参。当调用trim(username)的时候,username就替换了str。
判断值为null或者”“空字符串用==
alert表示弹出对话框,内容是字符串,所以需要用引号括起来。
username.focus()表示焦点聚集在username这个对象,也就是输入框。
return false;return表示函数执行结束,后面的代码不执行。return false表示该函数返回一个boolean值为false。对应到表单,就是οnsubmit=”false”,表示不提交。
如果if条件都满足,则return true;提交。
||表示或者,意思是,如果username==null或者username是空字符串,条件1或者条件2为true则都是true
方法2:js控制提交表单

首先,表单元素代码如下:

<form action="/back/login/login" method="post" id="form1">
    <span>用户</span>
    <input type="text" name="username" id="username"/><br/>  
    <span>密码</span>
    <input type="password" name="password" id="passsword"/><br/>  
   
    <a href="javascript:sb();">提交</a>     
</form>

这里关于提交,页面切图通常都会用a标签或者button来提交,因为涉及到表单验证。

同样,js:

function sb(){
        var username = document.getElementById("username");
        var password = document.getElementById("passsword");
        if(trim(username.value)==null || trim(username.value)==""){
            alert("请输入用户名");
            username.focus();
            return;
        }
        if(trim(password.value)==null || trim(password.value)==""){
            alert("请输入密码");
            password.focus();
            return;
        }

        form1.submit();

    }

 js含义:

这个sb()方法没有返回值,return就是直接结束,如果没有return就一直执行完所有代码。也就是说,验证通过就会提交。
这里说明一下提交的方法,可以用form的id或者name属性表示form这个对象,然后调用submit()方法即可。
当然,推荐用document.getElementById(“form1”).submit();  

  • 0
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

西兰先森

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值