Django博客搭建_用户注册3_手机号校验

Blog项目——用户注册

本文接上文

八、 手机号校验

1. 分析

请求方法：GET

url定义：/mobiles/(?P<mobile>1[3-9]\d{9})

请求参数：url路径参数

参数	类型	是否必传	描述
mobiles	数字	是	用户输入

2. 测试

手机号校验的方法与用户名校验类似，先说一下简单思路：

1. 用户在前台输入手机号，然后焦点移出手机输入框后(js的blur事件)
2. js通过jquery获取这手机号，然后进行简单校验
   1. 是否为空
   2. 是否符合手机格式
3. 如果上面都通过，则利用ajax往后台发数据，
   1. 拼接url
   2. 设置参数
   3. 发送数据
4. 等待返回值data
   1. 如果data里的count不为0，则说明手机号已存在
   2. 如果data里的count为0，则说明这个手机号可以正常使用
5. 将返回结果通过alter通知用户

同样的，我们从路由出发：

verifitications/views.py

# 手机号校验
class MobileView(View):
	def get(self, request, mobile):
		data = {
			"mobile": mobile,
			"count": Users.objects.filter(mobile=mobile).count()
		}
		return to_json_data(data=data)

verifitications/urls.py路由也是使用正则匹配

re_path(r"mobiles/(?P<mobile>1[3-9]\d{9})", views.MobileView.as_view(),name="mobile"),

最后，我们查看一下js部分：

$mobile.blur(function () {
    fn_check_mobile()
});

// check the mobile whether register
function fn_check_mobile() {
    let $sMobile = $mobile.val() // get data

    // check mobile whether null
    if ($sMobile === ""){
        message.showError("手机号不能为空");
        return;
    }

    // use re to check mobile
    if (!(/^1[3-9]\d{9}$/).test($sMobile)){
        message.showError("手机号格式错误，请重新输入")
        return;
    }

    // send sjax
    $.ajax({
        url: "/mobiles/" + $sMobile + "/",
        type: "GET",
        dataType: "json"
    }).done(function (res) {
        if(res.data.count !== 0){
            message.showError("手机号已注册，请重新输入")
        }else{
            message.showSuccess("手机号可以正常使用")
        }
    }).fail(function () {
        message.showError("服务器超时，请重试！")
    })
}