元素定義類型
1、<input type=“button” /> 定義爲一個普通、可點擊的按鈕。
2、<input type=“submit” /> 定義爲一個提交按鈕，submit爲button的特例。提交按鈕會把表單數據發送到服務器。
點擊觸發動作
1、<input type=“button” /> button就是一個普通的按鈕，如果沒有添加onclick事件的監聽，點擊時沒有任何反應，onclick事件通常對應一個javascript的函數，此時的javascript函數中通常爲提交數據到服務端，也會加上一些數據的檢驗後再進行提交。
# button按鈕定義，onclick事件爲註冊提交
<input id="btnSubmit" type="button" class="btn btn-primary" value="注 冊" onclick="bindClickSubmit()">
# js函數定義
function bindClickSubmit() {
$('#btnSubmit').click(function () {
$('.error-msg').empty();
// 收集表單中的數據（找到每一個字段）$('#regForm').serialize()
// 數據ajax發送到後臺
$.ajax({
url: "{% url 'register' %}",
type: "POST",
data: $('#regForm').serialize(), // 所有字段數據 + csrf token
dataType: "JSON",
success: function (res) {
if (res.status) {
{
#頁面跳轉#}
location.href = res.data;
} else {
{
#console.log(res.error);#}
$.each(res.error, function (key, value) {
$("#id_" + key).next().text(value);
})
}
}
})
})
}
2、<input type=“submit” />默認情況下，點擊後會執行提交form表單的動作
#點擊提交按鈕，把form表單數據傳送到後端/服務器端進行邏輯處理
<input type="submit" class="btn btn-primary" value="登 錄">
驗證方式
1.<input type=“button” /> button的驗證完全交給onclick()事件
2.<input type=“submit” /> submit的驗證需要藉助onsubmit屬性
#form表單定義，實現註冊功能
#onsubmit屬性中對應check()事件，當表單提交前，使用check()中的驗證方式對錶單數據檢驗
<form method="POST" enctype="multipart/form-data" action="{% url 'axf:register' %}" onsubmit="check()">
{% csrf_token %}
<div class="form-group">
<label for="username_input">用戶名</label>
<input name="username" type="text" class="form-control" id="username_input" placeholder="請輸入用戶名">
<span id="username_info"></span>
</div>
<div class="form-group">
<label for="email_input">郵箱</label>
<input name="email" type="text" class="form-control" id="email_input" placeholder="請輸入郵箱">
</div>
<div class="form-group">
<label for="password_input">密碼</label>
<input name="password" type="password" class="form-control" id="password_input" placeholder="請輸入密碼">
</div>
<div class="form-group">
<label for="password_confirm_input">確認密碼</label>
<input type="password" class="form-control" id="password_confirm_input" placeholder="請再次輸入密碼">
</div>
<div class="form-group">
<label for="icon_input">頭像</label>
<input name="icon" type="file" id="icon_input">
</div>
<button type="submit" class="btn btn-success btn-block">註冊</button>
</form>
# check()定義驗證方式，包括用戶名非空和密碼加密顯示
function check() {
var $username = $("#username_input");
var username = $username.val().trim();
if (!username){
return false
}
var info_color = $("#username_info").css('color');
if (info_color == 'rgb(255, 0, 0)'){
return false
}
var $password_input = $("#password_input");
var password = $password_input.val().trim();
$password_input.val(md5(password));
return true
}