js基础 js+from表单 提交 和 验证

版权声明：本文为博主原创，转载请留言并标明出处 https://blog.csdn.net/qq_36355271/article/details/88795686

方法1：原始提交

<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校验：在from属性后面接着添加onsubmit="return false;"属性.表示不提交。true则相反。这里可以用一个方法替换

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

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。对应到表单，就是onsubmit="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>

验证：

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();

方法三：

ajax提交

$.ajax({
    //几个参数需要注意一下
    type: "POST",//方法类型
    dataType: "text",//预期服务器返回的数据类型
    url: "/back/login/login" ,//url
    data: $('#form1').serialize(),
    success: function (result) {
        console.log(result);//打印服务端返回的数据(调试用)
        alert(result);

        // $.toast("SUCCESS");
    },
    error : function() {
        alert("异常！");
    }
});