提交数据时验证的两种方式 onclick与onsubmit

在提交表单前， 一般都会进行数据验证， 可以选择在submit按钮上的onclick中验证， 也可以在form表单的属性onsubmit中验证

但是onclick比onsubmit更早被触发

提交过程

1、用户点击按钮 —->

2、触发onclick事件 —->

3、onclick返回true或未处理onclick —->

4、触发onsubmit事件 —->

5、onsubmit未处理或返回true ——>

6、提交表单.

onsubmit与onclick的处理函数返回false， 不会引起表单提交

onsubmit是必须使用return 函数名() 的形式编写， 否则会出现即使判断不成功也会提交数据

 

onsubmit方式

<form method="post" action="/user/register/" onsubmit="return register();">
                    <div class="login-input-box">
                        {% csrf_token %}
                        <input type="text" id="uname" name="uname" value="" class="login-admin active"
                               placeholder="邮箱注册">
                        <span style="color:red;" id="aSpan"></span>

                        <input type="password" id="pwd" name="pwd" value="" class="login-password">
                        <span style="color:red;" id="pSpan"></span>

                        <button class="login-btn" style="color: white;text-decoration: none;cursor: pointer">注册</button>
                    </div>
</form>

<script>
        function isEmail(str) {
            var reg = /^[a-zA-Z0-9_-]{6,}@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            return reg.test(str);
        }

        function register() {
            //获取输入框的值
            var account = $('#uname').val();
            var password = $('#pwd').val();

            //简单校验
            if (account.length < 6 || !isEmail(account)) {
                $('#aSpan').text('邮箱长度不能小于六位');
                return false;
            }

            if (password.length < 6) {
                $('#pSpan').text('密码长度不能小于六位');
                return false;
            }

            hex_pwd = hex_md5(password);
            $('#pwd').val(hex_pwd);
　　　　　　  return true;
        }
</script>

 

onclick方式

<form method="post" action="/user/register/">
                    <div class="login-input-box">
                        {% csrf_token %}
                        <input type="text" id="uname" name="uname" value="" class="login-admin active"
                               placeholder="邮箱注册">
                        <span style="color:red;" id="aSpan"></span>

                        <input type="password" id="pwd" name="pwd" value="" class="login-password">
                        <span style="color:red;" id="pSpan"></span>

                        <button class="login-btn" onclick="register();" style="color: white;text-decoration: none;cursor: pointer">注册</button>
                    </div>
</form>

<script>
        function isEmail(str) {
            var reg = /^[a-zA-Z0-9_-]{6,}@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            return reg.test(str);
        }

        function register() {
            //获取输入框的值
            var account = $('#uname').val();
            var password = $('#pwd').val();

            //简单校验
            if (account.length < 6 || !isEmail(account)) {
                $('#aSpan').text('邮箱长度不能小于六位');
                return false;
            }

            if (password.length < 6) {
                $('#pSpan').text('密码长度不能小于六位');
                return false;
            }

            hex_pwd = hex_md5(password);
            $('#pwd').val(hex_pwd);
　　　　　　  return true;
        }
</script>