先通过bootstrap验证再发送ajax请求的完整代码及脚本

先通过bootstrap验证再发送ajax请求的完整代码及脚本

<form class="needs-validation" autocomplete="off" novalidate=""
                              action="{% url 'user_register' %}" method="post" id="regform-two">
                            {% csrf_token %}
                            <div class="form-group">
                                <label>昵称</label>
                                <input class="form-control" type="text" name="name" placeholder="6-10位英文数字账户"
                                       pattern="[a-z0-9A-Z]{6,12}" required="">
                                <div class="invalid-feedback">请输入你的用户名.</div>
                            </div>
                            <div class="form-group">
                                <label>邮箱</label>
                                <input class="form-control" type="email" placeholder="[email protected]" name="email"
                                       pattern="^[a-z0-9A-Z]+([-_.][a-z0-9A-Z]+)*@([a-z0-9A-Z]+[-.])+[a-z0-9A-Z]{2,6}$"
                                       required="">
                                <div class="invalid-feedback">请输入一个有效的邮箱地址..</div>
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <div class="password-toggle">
                                    <input class="form-control" type="password" name="pwd" required=""
                                            placeholder="6-10位英文数字密码" pattern="[a-z0-9A-Z]{6,12}">
                                    <label class="password-toggle-btn">
                                        <input class="custom-control-input" type="checkbox"><i
                                            class="czi-eye password-toggle-indicator"></i><span
                                            class="sr-only">显示密码</span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>重复密码</label>
                                <div class="password-toggle">
                                    <input class="form-control" type="password" name="confirm_pwd" required=""
                                           placeholder="重复相同的英文数字密码" pattern="[a-z0-9A-Z]{6,12}">
                                    <label class="password-toggle-btn">
                                        <input class="custom-control-input" type="checkbox"><i
                                            class="czi-eye password-toggle-indicator"></i><span
                                            class="sr-only">显示密码</span>
                                    </label>
                                </div>
                            </div>
                            <button class="btn btn-primary btn-block btn-shadow" id="reg_sub_two" type="submit">立即注册
                            </button>
                        </form>
<script>
        $("#regform-two").submit(function (event) {
            if ($(this)[0].checkValidity() === false){
                 event.preventDefault();// 阻止提交表单
                 event.stopPropagation();
            } else {
                $.ajax({
                    type: "post",   //方法类型
                    url: "/user/register/",
                    data: $("[name='loginform']").serialize(),
                    success: function (data) {
                        alert('成功');
                    },
                    error: function (date) {
                        alert('失败');
                    }
                });
            }
        })
    </script>

先通过bootstrap验证再发送ajax请求的完整代码及脚本_第1张图片
先通过bootstrap验证再发送ajax请求的完整代码及脚本_第2张图片

你可能感兴趣的:(Django,javascript,Python)