添加 “表单提交时检查” 功能-遇到的问题及解决

实现 “点击表单外的按钮提交表单” 功能

问题描述

老师给的 注册 html 文件里 提交按钮<input> 是放在表单 <form> 外面的，如果将之挪到 <form> 里面样式会错乱，而老师给的样式文件牵一发而动全身，所以打算不动 <input> 的位置，而是用 js 实现 "点击表单外的按钮<input> 提交表单<form>

解决方案

在提交按钮添加函数触发

onclick="submit();"

编写 submit() 函数：

<script>
function submit(){
   document.getElementById("loginForm").submit();//表单提交
</script>

实现 “表单提交时检查复选框 checkbox 的选中状态” 功能

问题描述

在提交表单前检查复选框 checkbox 的勾选状态，勾选则提交，否则输出提示信息

解决方案

function submit(){
    var val = $('#reader-me1').prop("checked");
    if (!val) {
       alert('请先同意《服务协议》鸭')
   }else
    {
        document.getElementById("loginForm").submit();//表单提交
   }
}

</script>

进入过的误区

发现 javascript 修改 checkbox 的value 值无法生效

实现提交时对输入字段是否为空的检查功能

注册表单 <form> 里有三项必填项，理论上在输入元素 <input> 里添加输入属性required="required" 即可，然而可能是由于提交按钮放在了表单外面的原因，提交时不会检查 <input> 是否为空，而是直接提交，决定用检查复选框勾选状态的方法来实现对输入框的检查

<script>
function submit(){
    var val = $('#reader-me1').prop("checked");
    var email=$('#email').prop("value");
    var password=$('#password').prop("value");
    var passwordRepeat=$('#passwordRepeat').prop("value");

    if(!email || !password || !passwordRepeat){
        alert('请填写完整的注册信息')
    }
    if (!val) {
       alert('请先同意《服务协议》鸭')
   }
    if(email && password && passwordRepeat && val)
    {
        document.getElementById("loginForm").submit();//表单提交
   }
}
</script>

参考链接

[1] input提交按钮在form表单外面还要起到提交信息作用

[2] 实现提交表单前先勾选复选框，判断复选框状态