button和submit两种按钮的区别

元素定义类型

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
}