Web

html form submit

最近在做的部分与 HTML 的 form 表单相关,记录下以下几个问题。

用 form 表单外的 button 提交

一般情况下,form 表单的提交按钮会写在 form 表单内,而且非常方便,如:

1
2
3
4
5
<form action="/userlist/add" method="POST">
用户名:<input type="text" id="username" required="required" />
密码:<input type="text" id="password" required="required" />
<input type="submit" value="提交" />
</form>

这样,就会有一个叫提交的按钮,点击后会执行 form 的 action。

但有时我们需要在 form 标签以外的某一个 button 上执行表单的提交。比如在另外一个 div 上有一个 button。这时就让这个 button 去执行一个 js 方法,用 js 去调用这个 form 的submit 方法即可,如:

1
2
3
4
5
6
7
8
9
10
<div class="modal-body">
<form action="/userlist/add" method="POST" id="formNewUser">
用户名:<input type="text" id="username" />
密码:<input type="text" id="password" />
<input type="submit" value="提交" />
</form>
</div>
<div class="modal-footer">
<button onclick="$('#formNewUser').submit()">提交</button>
</div>

注意,直接调用 submit 方法的方式提交,即使给 username 和 password 的 input 标签添加了 required 属性,也不会自动校验,而是直接执行 action 的方法。所以如果需要校验必填项,就在 js 方法里面校验,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="modal-footer">
<button onclick="submitValidate()">提交</button>
</div>
<script type="text/javascript">
function submitValidate() {
if ($("#username").val().length == 0) {
alert("请输入用户名");
} else if ($("#password").val().length == 0) {
alert("请输入密码");
} else {
$('#formNewUser').submit()
}
}
</script>

form 表单内的 button 会默认自动提交

如果一个 button 在 form 表单里,那他默认就是一个 submit 按钮,不管你有没有写成 type="submit"

1
2
3
<form>
<button>...</button>
</form>

但有些按钮我们并不想让它执行提交,则可以对其添加属性 type="button" 即可。

提交非由用户填写的参数

有时我们需要在调用接口时,提交一些不是由用户填写的参数。

如编辑一条数据,其 id 是程序在提交时直接填充上的,而不需要由用户填写,也不需要用户看到。

这时,只需要在 form 里增加一个 input,并且将其 hidden 属性设置为 hidden,value 属性设置为所需要提交的值即可。如:

1
2
3
4
5
<form>
<input type="text" value="1234567890abcdef" hidden="hidden" name="id" />
<input type="text" name="username" />
<input type="text" name="address" />
</form>

EJS template

与所有软件开发一样,Web 开发中也会面对着逻辑和数据。将逻辑和数据分开,是良好的工程结构必须做到的,否则代码会混乱不堪。而很不幸的是,用 JavaScript 去生成 HTML 时,往往就会都杂糅到一块儿。

EJS 就是一个 JavaScript 的模版类,可以将逻辑写成一个 HTML 模版,并把数据分离出去。包括 hexo, Express.js 等框架中也都采用了 EJS。

EJS

其最主要的是 <% js代码 %><%= 表达式 %> 两个语句。前者会执行里面的 js 代码,后者会将里面的表达式直接输出到 HTML 中。

如:

1
2
3
4
5
6
7
<% if (gender==0) { %>
<%= 'Male' %>
<% } else if (gender==1) { %>
<%= 'Female' %>
<% } else { %>
<%= 'Unknown' %>
<% } %>

简单的判断,也可用问号表达式:

1
<%= a>10 ? 'Success' : 'Failed' %>

需要注意,开括号<%的右侧和内容之间、闭括号%>的左侧和内容之间,一定要留有空格,否则会报错。