开发的项目中要用到实名认证和手机验证,但是后台提交信息都是直接提交的,那么中间要加入验证这个环节就要自己写了
我用的是xadmin做后台,django自带的admin应该也是同理的,xadmin基本上是继承原生的admin
先要做一个form,并且要自定义一个widget,这样我们可以在这个widget里做一个发送验证码的按钮并且写入一些js代码
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)
效果是这样的,图是开发过程中截的,位置可以自己再调一下,把验证码调到手机下面一行显示
image.png
