button和submit两种按钮的区别
submit和button区别
元素定义类型
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.);#}
$.,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>改变button按钮的形状
# 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
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。