django后台自定义form并使用自定义的widget

开发的项目中要用到实名认证和手机验证,但是后台提交信息都是直接提交的,那么中间要加入验证这个环节就要自己写了

我用的是xadmin做后台,django自带的admin应该也是同理的,xadmin基本上是继承原生的admin

先要做一个form,并且要自定义一个widget,这样我们可以在这个widget里做一个发送验证码的按钮并且写入一些js代码

自定义Form 的目的是用来验证验证码是否准确和加入一些自己的判断逻辑

from djangoimport forms

class UserInfoForm(forms.ModelForm):
    tel = forms.CharField(validators=[validators.RegexValidator(r'1[345678]\d{9}', message='请输入正确格式的手机号码！')],
                          label="手机号码", widget=TelInput(attrs={'class': 'textinput form-control'}))
    code = forms.CharField(validators=[validators.RegexValidator(r'\d{4}', message='请输入正确格式的验证码！')], label="验证码")
    id_card = forms.CharField(validators=[validators.RegexValidator(r'\d{17}\w{1}', message='请输入正确格式的身份证号码！')],
                              label="身份证号码")
    name = forms.CharField(min_length=2, max_length=20, label="真实姓名")

    def clean(self):
        tel = self.cleaned_data.get('tel')
        code = self.cleaned_data.get('code')
        cache_code = cache.get(tel, None)
        if not cache_code or cache_code != code:
            raise forms.ValidationError(message="验证码不正确或已失效")
        if UserInfo.objects.filter(tel=tel).count() > 0:
            raise forms.ValidationError(message="此手机号码已认证过,不能重复认证")

        cache.delete(tel)
        return self.cleaned_data

然后再定义一下这个widget

from django.forms.widgetsimport Input
from django.templateimport loader
from django.utils.safestringimport mark_safe

# 自定义widgets在手机号后加上发送验证码和相应js代码
class TelInput(Input):
    input_type = 'text'
    template_name = "widgets/tel.html"

    def render(self, name, value, attrs=None, renderer=None):
        context = self.get_context(name, value, attrs)
        template = loader.get_template(self.template_name).render(context)
        return mark_safe(template)

这个模板文件放在项目templates的相应路径下 tel.html

这个模板作用就是在手机号输入框后面加一个发送验证码按钮,ajax里的url就是对应你发送验证码的view的映射地址,点完发送后会自动倒计时,count是倒计时的时间。

<input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %}
       value="{{ widget.value|stringformat:'s' }}"{% endif %}
        {% include "widgets/attrs.html" %}>
  <br>
<button id="code-btn" class="btn" type="button">发送验证码</button>
<span id="code-msg" style="margin-left:10px;"></span>
<script>
    $('#code-btn').click(function () {
        var count = 20;
        var phone = $("#id_tel").val();//手机号码
        var reg_phone = /1\d{10}/;
        if (!reg_phone.test(phone)) {   //验证手机是否符合格式
            alert("填写您的手机号");
            return false;
        }

        $("#id_tel").attr("readonly", "readonly");
        $("#code-btn").attr('disabled', 'disabled');

        //向后台发送处理数据
        $.ajax({
            type: "POST", //用POST方式传输
            dataType: "json", //数据格式:JSON
            url: '{% url 'userinfo:sms_code' %}', //目标地址
            data: "tel=" + phone,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            },
            complete: function (msg) {
                if (msg.responseText == '发送成功') {
                    $('#code-msg').html('<font color=green>' + msg.responseText + '</font>');
                    //开始计时
                    $("#code-btn").html("倒计时" + count + "秒");
                    var timer = setInterval(function () {
                        count--;
                        $("#code-btn").html("倒计时" + count + "秒");
                        if (count == 0) {
                            clearInterval(timer);
                            $("#code-btn").attr("disabled", false);//启用按钮
                            $("#code-btn").html("重新发送验证码");
                            $("#id_tel").removeAttr("readonly");
                        }
                    }, 1000);
                } else {
                    $("#code-btn").attr("disabled", false);//启用按钮
                    $("#id_tel").removeAttr("readonly");
                    $('#code-msg').html('<font color=red>' + msg.responseText + '</font>');
                }
            },
        });
    });
</script>

最后要在admin注册里面加上自定义的form就可以了 adminx.py

from .form import UserInfoForm
from . import models

class UserInfoOption(object):
    list_display=['tel','name',]
    form = UserInfoForm

xadmin.site.register(models.UserInfo, UserInfoOption)

效果是这样的,图是开发过程中截的,位置可以自己再调一下,把验证码调到手机下面一行显示