ECMAScript/前端

js与form交互方式总结

csxiaoyao · 2月17日 · 2017年 本文1586字 · 阅读4分钟69

js与form交互方式总结

Write By CS逍遥剑仙
我的主页: csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: sunjianfeng@csxiaoyao.com
QQ: 1724338257

前言:刚开始接触web开发的时候,往往采用form表单直接提交的方式,但可能存在兼容问题,如:

<form method="" action="">
    ...
    <input type="submit" value="submit"/>
</form

后来熟悉了js,更加倾向于使用ajax提交表单,有时甚至连form标签都不使用了。
然而,从HTML语义化的角度来说,使用form表单有更强的可读性,虽然简单,仍简单总结下form与js的兼顾。

1 方式一:onsubmit验证提交

form标签中增加onsubmit事件来判断表单提交是否成功

<script type="text/javascript">
function validate(obj) {
    if (confirm("提交表单?")) {
        alert(obj.value);
        return true;
    } else {
        alert(obj.value);
        return false;
    }
}
</script>
<body>
    <form action="" onsubmit="return validate(document.getElementById('myText'));">
        <input type="text" id="myText"/>
        <input type="submit" value="submit"/>
    </form>
</body>

2 方式二:通过button按钮触发自定义方法验证提交

会自动忽略其他标签中的属性,如form标签中的onsubmit属性失效,js使用submit方法提交

<script type="text/javascript">
function validate() {if(confirm("提交表单?")){return true;}else{return false;}};
//也可以绑定click事件
function submitForm() {
    if (validate()) {
        document.getElementById("myForm").submit();
    }
}
</script>
<body>
    <form action="" id="myForm">
        <input type="text"/>
        <input type="button" onclick="submitForm();"/> 
    </form>
</body>

3 方式三:将onsubmit(onclick)事件放在submit标签中

onsubmit事件放在submit标签中而不是form标签中,此时表单验证失效,点击提交按钮表单直接提交

<script type="text/javascript">
function validate() {
    if (confirm("提交表单?")) {
        return true;
    } else {
        return false;
    }
}
</script>
<body>
    <form action="">
        <input type="text"/>
        <input type="submit" value="submit" onsubmit="return validate()"/>
    </form>
</body>

4 方式四:数据处理(serialize)

ajax得到form表单数据的便捷方法serialize

var formData=$("#formId").serialize();
$.ajax({
    type: "POST",
    url: "http://www.csxiaoyao.com",
    data:formData,
    success: function(result){

    }
});

js与form交互方式总结-禅林阆苑

0 条回应

×