关于form表单提交问题

Question

现在要写一个注册页面，请问用form表单提交和 直接取input 的vlaue 值提交，这两种方式的区别是什么？原来一直都是用直接取值的方式做的登录、注册这种页面；或者下面写法有问题的麻烦指点一下form表单方式<form  id="form">        <div>            <label for="username">请输入用户：</label>            <input type="text" name="username" required="required" placeholder="请输入用户名" id="username">        </div>        <div>            <label for="mobile">请输入电话：</label>            <input type="text" name="mobile" required="required" placeholder="请输入电话：" id="mobile">        </div>        <div>            <label for="password">请输入密码：</label>            <input type="password" name="password" required="required" placeholder="密码" id="password">        </div>        <input type="submit" value="注册" class="btn">    </form>        //js      form = $("#form");    form.data().submit = function (){        form.data() = $.post(url,{            username:form.data().username,            mobile: form.data().mobile,        })    }直接取值方式<input type="text" name="username" required="required" placeholder="请输入用户名" id="username"><input type="text" name="mobile" required="required" placeholder="请输入电话：" id="mobile">//jsvar username = $('username').val();var mobile= $('mobile').val();$.post(url,{    username:username,    mobile:mobile});这两中方式的优劣在哪里？先不考虑表单验证问题

Answer 1

1、“直接取值”，的方法看起来比较直接，适合实现较为小的表单功能。
2、“jQ表单提交”，的方法是jq库对表单常用的功能进行的封装，适合实现稍微复杂的功能。
3、H5新特性里，也增加了表单的一些新属性和标签，方便我们直接操作表单。比如submit按钮等，详情查看api。
4、我扩展下，angular（2以上版本）为我们提供了2种表单方式，一是模板驱动表单（适和简单功能），二是响应式表单（可以实现更为复杂的功能，易于后期维护，代码更为美观）。
4、无论是哪种方式，性能都不会有很大差异，不然官方不会对外公布相应的api，即便有性能上的问题，测试版本中也会对其优化，这不应该是我们考虑的主要问题。
5、综上所述，我的建议是，使用“jQ表单提交”方法。不过按照自己的需求，题主斟酌。