十八.用户注册 ---- 用户名/用户密码/手机号验证 2021-04-07

最新推荐文章于 2023-03-10 17:55:23 发布
最新推荐文章于 2023-03-10 17:55:23 发布
阅读量2.6k 收藏 2
点赞数 1
分类专栏： Django 文章标签： django ajax python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50678394/article/details/115500390
版权

十八.用户注册 ---- 用户名/用户密码/手机号验证

引言

注：该篇文章接上一篇 十七.用户注册 ---- 图形验证码
在上一篇文章我们实现了用户注册中的图形验证码过程，接下来我们要实现用户名验证，密码验证，以及手机号验证.

实现注册要完成的图表

实现注册模块的整体流程

在这里插入图片描述
根据流程图总结注册业务包含如下功能

  • 注册页面
  • 图片验证码
  • 用户名检测是否注册
  • 手机号检测是否注册
  • 短信验证码
  • 注册保存用户数据

五.json响应数据结构设计

JSON三种数据解析方法

JSON数据现在是我们开发中用的最多的，百分之九十的数据都是通过JSON方式进行传输.

1.结构设计

实际项目是多人协同开发，特别是前后端交互，后端返回数据结构要一致。

{"errno": "0", "errmsg": "OK", "data": {...}}
字段类型说明
errno字符串错误编码
errmsg字符串错误信息
data返回数据

在项目根目录中utils文件夹下创建res_code.py文件，用于定义错误编码，代码如下：
在这里插入图片描述

class Code:
    OK = "0"
    DBERR = "4001"
    NODATA = "4002"
    DATAEXIST = "4003"
    DATAERR = "4004"
    METHERR = "4005"
    SMSERROR = "4006"
    SMSFAIL = "4007"
​
    SESSIONERR = "4101"
    LOGINERR = "4102"
    PARAMERR = "4103"
    USERERR = "4104"
    ROLEERR = "4105"
    PWDERR = "4106"
​
    SERVERERR = "4500"
    UNKOWNERR = "4501"
​
​
error_map = {
    Code.OK: "成功",
    Code.DBERR: "数据库查询错误",
    Code.NODATA: "无数据",
    Code.DATAEXIST: "数据已存在",
    Code.DATAERR: "数据错误",
    Code.METHERR: "方法错误",
    Code.SMSERROR: "发送短信验证码异常",
    Code.SMSFAIL: "发送短信验证码失败",
​
    Code.SESSIONERR: "用户未登录",
    Code.LOGINERR: "用户登录失败",
    Code.PARAMERR: "参数错误",
    Code.USERERR: "用户不存在或未激活",
    Code.ROLEERR: "用户身份错误",
    Code.PWDERR: "密码错误",
​
    Code.SERVERERR: "内部错误",
    Code.UNKOWNERR: "未知错误",
}

2.快捷方法

为了方便定义一个快捷方法，在utils目录下创建json_res.py文件代码如下：

from django.http import JsonResponse
​
from .res_code import Code
​
​
def json_response(errno=Code.OK, errmsg='', data=None, kwargs=None):
json_dict = {
        'errno': errno,
        'errmsg': errmsg,
        'data': data
    }
    #判断kwargs 是否为字典类型
    if kwargs and isinstance(kwargs, dict) :
    #把数据添加到json_dict字典中
        json_dict.update(kwargs)
    #把字典转为json格式返回
    return JsonResponse(json_dict)

默认情况下JsonResponse只能对字典进行dumps，如果想要对非字典的数据进行dumps，那么需要给JsonResponse传递一个safe=False参数。

六、判断用户是否注册功能实现

1.接口设计

接口说明：

类目说明
请求方法GET
url定义/username/(?P\w{5,20})/
参数格式url路径参数

参数说明：

参数名类型是否必须描述
username字符串是输入的用户名

在调用接口返回的结果为：

  • 用户名：在前端输入的用户名
  • 用户数量：用用户名在数据库中查询的用户数量
{
    "errno": "0", 
    "errmsg": "OK", 
    "data": {
        "username": "username",         # 查询的用户名
        "count": 1                      # 用户名查询的数量
    }
}

2.接口实现后端代码

1.在已经创建好的app verification 中处理验证

2.在verification/views.py代码

 

from user.models import User
from utils.json_res import json_response
​
def check_username_view(request, username):
    #去数据库查询数据,然后返回就好了
    
    data = {
        ‘errno':'0',
        'errmsg'：'OK',
        'data':{
        'username': username,    #需要查询的用户名
        'count': User.objects.filter(username=username).count()   #询用户数量
        }
    }
​
    return json_response(data=data)

查询用户数为零–可以注册
查询用户数不为零–不可以注册
2.verification/urls.py代码
re_path和path的区别

re_path('username/(?P<username>\w{5,20})/', views.check_username_view, name='check_username'),

使用re_path 匹配方式，?P< username >\w{5,20})/ --用户名满足5-20位

from django.urls import path, re_path
from . import views
# url的命名空间
app_name = 'verification'
​
urlpatterns = [
    path('image_code/', views.image_code_view, name='image_code'),
    re_path('username/(?P<username>\w{5,20})/', views.check_username_view, name='check_username'),
]

3.前端页面代码

user/register.html(注册页面)代码如下：

在用户名处添加：

id="username"

为什么不删除"name"="username"
1.在html中id具有唯一性，方便查询
2. "name"="username" 是项目模板中自带的，可能与其他的地方对应，删除以后有可能造成不必要的错误
在这里插入图片描述
user/register.html(注册页面)代码如下：

{% extends 'base/base.html' %}
{% load static %}
{% block title %}注册{% endblock title %}

{% block link %}
<link rel="stylesheet" href="{% static 'css/user/auth.css' %}">
{% endblock link %}

{% block main_start %}
    <main id="container">
  <div class="register-contain">
    <div class="top-contain">
      <h4 class="please-register">请注册</h4>
      <a href="javascript:void(0);" class="login">立即登录 &gt;</a>
    </div>
    <form action="" method="post" class="form-contain">


      <div class="form-item">
        <input type="text" placeholder="请输入用户名" id="username" name="username" class="form-control" >
      </div>
      <div class="form-item">
        <input type="password" placeholder="请输入密码" name="password" class="form-control">
      </div>
      <div class="form-item">
        <input type="password" placeholder="请输入确认密码" name="password_repeat" class="form-control">
      </div>
      <div class="form-item">
        <input type="tel" placeholder="请输入手机号" name="telephone" class="form-control" autocomplete="off">
      </div>
      <div class="form-item">
        <input type="text" placeholder="请输入图形验证码" name="captcha_graph" class="form-captcha">
        <a href="javascript:void(0);" class="captcha-graph-img">
          <img src="{% url 'verification:image_code' %}" alt="验证码" title="点击刷新">
        </a>
      </div>
      <div class="form-item">
        <input type="text" placeholder="请输入短信验证码" name="sms_captcha" class="form-captcha" autocomplete="off">
        <a href="javascript:void(0);" class="sms-captcha" title="发送验证码">获取短信验证码</a>
      </div>
      <div class="form-item">
        <input type="submit" value="立即注册" class="register-btn">
      </div>
    </form>
  </div>
</main>
{% endblock main_start %}

{% block script %}
    <script src="{% static 'js/user/auth.js' %}"></script>
{% endblock script %}

4.前端js代码

base/base.html

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="{% static 'js/base/common.js' %}"></script>
<script src="{% static 'js/base/message.js' %}"></script>

在这里插入图片描述

user/register.html 第20行

<input type="text" placeholder="请输入用户名" id="username" name="username" class="form-control" >

user/auth.js代码：

关于js代码中的.$ajax()用法： $.ajax()方法详解

$(function () {

    // 定义状态变量
    //判断状态是false还是ture,如果是ture就直接引用
    let isUsernameReady = false,
        isPasswordReady = false,
        isMobileReady = false,
        isSmsCodeReady = false;

    let $img = $('.form-contain .form-item .captcha-graph-img img');
    // 1.点击刷新图像验证码
    $img.click(function () {
        $img.attr('src', '/image_code/?rand=' + Math.random())
    });

    // 2.鼠标离开用户名输入框校验用户名
    let $username = $('#username'); //获取前端页面中的username框
    $username.blur(fnCheckUsername); //blur是鼠标离开事件

    //鼠标离开username触发函数fnCheckUsername
    function fnCheckUsername() {
        isUsernameReady = false;            //校验用户名,没填入用户名为false
        let sUsername = $username.val();    // 获取用户名字符串
        if (sUsername === '') {
            // 如果用户名为空,返回消息
            message.showError('用户名不能为空')
            return
        }
        if (!(/^\w{5,20}$/).test(sUsername)) {
            //检测用户名长度
            message.showError('请输入5-20个字符的用户名');
            return
        }
        $.ajax({
            url: '/username/' + sUsername + '/',      //发送请求的地址
            type: 'GET',                              //请求方式
            dataType: 'json',                         //预期服务器返回的数据类型
            success: function (data) {
                // data 由服务器返回的数据，我们这里是json类型
                if (data.data.data.count !== 0) {
                    //根据json的数据结构的到用户数量
                    message.showError(data.data.data.username + '已经注册，请重新输入！')
                } else {
                    message.showInfo(data.data.username + '可以正常使用！');
                    isUsernameReady = true
                }
            },
            error: function (xhr, msg) {
                //请求失败时被调用的函数
                message.showError('服务器超时，请重试！')
            }
        });
    }

    // 3.检测密码是否一致
     let $passwordRepeat = $('input[name="password_repeat"]'); //获取前端input[name="password_repeat"] 中的内容(二次密码)
     $passwordRepeat.blur(fnCheckPassword);     //blur是鼠标离开事件

    //鼠标离开username触发函数fnCheckPassword
     function fnCheckPassword() {
        isPasswordReady = false;   //校验密码,没填入密码为false
        let password = $('input[name="password"]').val();   // 获得密码字符串
        let passwordRepeat = $passwordRepeat.val();      // 获取用户二次密码字符串
        if (password === '' || passwordRepeat === '') {
            message.showError('密码不能为空');
            return
        }
        if (password !== passwordRepeat) {
            message.showError('两次密码输入不一致');
            return
        }
        if (password === passwordRepeat) {
            isPasswordReady = true
        }
    }

});

5.运行结果

1.关于后端json的返回数据测试
在这里插入图片描述
2.对于前端代码测试：
在这里插入图片描述

七、判断手机号码是否注册功能

1.接口设计

接口说明：

类目说明
请求方法GET
url定义/mobile/(?P\1[3-9]\d{9})/
参数格式url路径参数

参数说明：

参数名类型是否必须描述
moblie字符串是输入的手机号码

返回结果：

  {
        "errno": "0", 
     	"errmsg": "OK", 
     	"data": {
            "mobile": "13xxxxxxxxx",			# 查询的手机号
            "count": 1						# 手机号查询的数量
        }
    }

2.后端代码

  1. verification/views.py代码
 # ····
   def check_mobile_view(request, mobile):
       """
       校验手机号是否存在
       url:/moblie/(?P<moblie>1[3-9]\d{9})/
       :param request:
       :param username:
       :return:
       """
       data = {
           'mobile': mobile,
           'count': User.objects.filter(mobile=mobile).count()
       }
   
       return json_response(data=data)
  1. verification/urls.py
 from django.urls import path, re_path
   from . import views
   # url的命名空间
   app_name = 'verification'
   
   urlpatterns = [
       path('image_code/', views.image_code_view, name='image_code'),
       re_path('username/(?P<username>\w{5,20})/', views.check_username_view, name='check_username'),
       re_path('mobile/(?P<mobile>1[3-9]\d{9})/', views.check_mobile_view, name='check_mobile'),
   ]

3. 前端js代码

register.html 将29行改成下面的内容

<input type="tel" placeholder="请输入手机号" name="mobile" class="form-control" autocomplete="off">

user/auth.js代码：

$(function () {

    // 定义状态变量
    //判断状态是false还是ture,如果是ture就直接引用
    let isUsernameReady = false,
        isPasswordReady = false,
        isMobileReady = false,
        isSmsCodeReady = false;

    let $img = $('.form-contain .form-item .captcha-graph-img img');
    // 1.点击刷新图像验证码
    $img.click(function () {
        $img.attr('src', '/image_code/?rand=' + Math.random())
    });

    // 2.鼠标离开用户名输入框校验用户名
    let $username = $('#username'); //获取前端页面中的username框
    $username.blur(fnCheckUsername); //blur是鼠标离开事件

    //鼠标离开username触发函数fnCheckUsername
    function fnCheckUsername() {
        isUsernameReady = false;            //校验用户名,没填入用户名为false
        let sUsername = $username.val();    // 获取用户名字符串
        if (sUsername === '') {
            // 如果用户名为空,返回消息
            message.showError('用户名不能为空')
            return
        }
        if (!(/^\w{5,20}$/).test(sUsername)) {
            //检测用户名长度
            message.showError('请输入5-20个字符的用户名');
            return
        }
        $.ajax({
            url: '/username/' + sUsername + '/',      //发送请求的地址
            type: 'GET',                              //请求方式
            dataType: 'json',                         //预期服务器返回的数据类型
            success: function (data) {
                // data 由服务器返回的数据，我们这里是json类型
                if (data.data.data.count !== 0) {
                    //根据json的数据结构的到用户数量
                    message.showError(data.data.data.username + '已经注册，请重新输入！')
                } else {
                    message.showInfo(data.data.username + '可以正常使用！');
                    isUsernameReady = true
                }
            },
            error: function (xhr, msg) {
                //请求失败时被调用的函数
                message.showError('服务器超时，请重试！')
            }
        });
    }

    // 3.检测密码是否一致
     let $passwordRepeat = $('input[name="password_repeat"]'); //获取前端input[name="password_repeat"] 中的内容(二次密码)
     $passwordRepeat.blur(fnCheckPassword);     //blur是鼠标离开事件

    //鼠标离开username触发函数fnCheckPassword
     function fnCheckPassword() {
        isPasswordReady = false;   //校验密码,没填入密码为false
        let password = $('input[name="password"]').val();   // 获得密码字符串
        let passwordRepeat = $passwordRepeat.val();      // 获取用户二次密码字符串
        if (password === '' || passwordRepeat === '') {
            message.showError('密码不能为空');
            return
        }
        if (password !== passwordRepeat) {
            message.showError('两次密码输入不一致');
            return
        }
        if (password === passwordRepeat) {
            isPasswordReady = true
        }
    }

    // 4.检查手机号码是否可用
    let $mobile = $('input[name="mobile"]'); //获取前端input[name="mobile"] 中的内容(手机密码)
    $mobile.blur(fnCheckMobile);
    //鼠标离开username触发函数fnCheckMobile
    function fnCheckMobile () {
        isMobileReady = true;
        let sMobile = $mobile.val(); // 获得手机字符串
        if(sMobile === ''){
            message.showError('手机号码不能为空');
            return
        }
        if(!(/^1[3-9]\d{9}$/).test(sMobile)){
            message.showError('手机号码格式不正确');
            return
        }

        $.ajax({
            url: '/mobile/' + sMobile + '/',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                if(data.data.count !== 0){
                    message.showError(data.data.mobile + '已经注册，请重新输入！')
                }else {
                    message.showInfo(data.data.mobile + '可以正常使用！');
                    isMobileReady = true
                }
            },
            error: function (xhr, msg) {
                message.showError('服务器超时，请重试！')
            }
        });

    }
});

4.运行结果

在这里插入图片描述

明玥几时有
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
登录注册时手机验证码发送的实现
qq_44704363的博客
03-24 2799
短信验证 首先需要通过个人账户获得 授权码（id、密码），再通过这些信息获得服务通过对阿里云网址 ： https://www.aliyun.com/获得短信发送的权限（sms）： 登录 / 注册 阿里云 点击 AccessKey 管理 创建用户包括（用户组用来添加权限，用户是具体用来操作的账号） 为新建的用户添加权限 开通阿里云短信服务 首先到阿里云提供的短信服务中去； [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-knyP58Rp-1648105282196)(C:
vue注册页面源码 (带手机号、验证码、密码)
qq_40137978的博客
09-27 1028
<template> <div class="registerTotal"> <div class="register"> <img src="../../assets/index-head.png" alt=""> <p class="registerTitle">账号注册</p> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label
使用正则表达式验证注册页面（用户名，密码，确认密码，邮箱，手机号）
斯维特哈特
01-18 2万+
原文链接： 使用正则表达式验证注册页面（用户名，密码，确认密码，邮箱，手机号） html部分 &lt;style type="text/css"&gt; body{ margin:0; padding:0; font-size:12px; line-height:20px; } .main{ width:525px; margin-left:...
简单实现用户注册验证功能的步骤及代码
qq_49809417的博客
08-10 1万+
用户注册验证 操作步骤:(拆分需求) 1>效验参数不能为空 2>两次输入的密码是否一样 3>效验手机号码是否正确 4>效验手机号码是否唯一 5>效验短信验证码是否正确 6>注册 注意点:核心属性 必须自己控制 1>验证手机号码是否已经被注册过 controller @GetMapping("/get") public Object get(String id){ return userInfoService.get(id); } service (页
12.编写一个用户注册的验证程序，需要注册的信息有： 用户名（不得大于10个位，以字母开头）， 手机号（11位数字）， 邮箱（判断是否是邮箱正确的格式）， 密码（8—16位，必须包含大写
张鹏的博客
05-31 9285
package work11; /* 12.编写一个用户注册的验证程序，需要注册的信息有： 用户名（不得大于10个位，以字母开头）， 手机号（11位数字）， 邮箱（判断是否是邮箱正确的格式）， 密码（8—16位，必须包含大写、小写、数字）， 在控制台根据提示输入相关信息，验证失败提示要求并重写输入，验证成功才能进入下一项内容填写， 所有信息填写成功后提示“是否提交N/Y”，用户确认提交...
[案例6-3]模拟用户注册
qq_58652572的博客
04-04 5955
任务描述: 互联网为我们提供了巨大的便利，如微信带给我们的视频、淘宝带给我们便利的购物等，但这些APP都需要有一个账户才可以登录，而账户需要注册可以获取。 本例要求编写一个程序，模拟用户注册。用户输入用户名、密码、确认密码、生日（格式为yyyy--mm—dd为正确）、手机号（手机号长度为11位，并且以13、15、17、18为开头的手机号为正确）、邮箱（包含符号“@”为正确）信息之后，判断信息正确后，验证用户是否重复，重复则给出相应提示，如果不重复则注册成功。案例要求使用HashSet集合实现。 运行结
2021-2022收藏的精品资料互联网创业大赛报名注册流程图.doc
12-06
- 在登录界面输入你刚刚注册的用户名（手机号）和密码。 4. **选择身份** - 登录后，你会看到一个身份选择页面。作为参赛者，你需要选择左边的“创业者”，然后点击“立即创建项目”。 5. **完善个人信息** - ...
使用Flask-Login实现用户登录和权限验证
最新发布
04-22
用户登录是指用户通过提供有效的身份凭证（如用户名和密码、手机号码和验证码等）来验证自己的身份，并获得对特定系统、应用程序或网站的访问权限。用户登录是保护用户隐私和数据安全的重要措施，同时也为用户提供...
商业编程-源码-ID设计留言板 v2.0.zip
06-21
系统可能使用了常见的身份验证机制，如用户名/密码组合，也可能支持邮箱或手机号验证。 2. **数据库设计**：留言板系统需要存储用户的留言信息，包括用户名、留言内容、时间戳等，可能采用关系型数据库（如MySQL）...
Android-Android登录注册设置密码短信验证码简单逻辑界面等
08-13
- 输入框：在界面上，通常需要两个输入框，分别用于用户输入用户名（通常是手机号或邮箱）和密码。 - 提交按钮：用户点击后，应用会检查输入是否合法，并尝试与服务器进行身份验证。 - 错误提示：如果登录失败，...
android-sign-in-up-screen.7z
08-07
- 注册流程：验证邮箱或手机号，发送验证码。 11. **测试与调试**： - 单元测试：验证各个组件功能。 - UI测试：确保布局在不同设备和屏幕尺寸上表现良好。 - Espresso测试框架：针对用户界面进行自动化测试。 ...
JS实现用户注册时获取短信验证码和倒计时功能
10-21
在用户注册时，通常需要短信验证码，而且为了交互效果，也需要增加倒计时。该如何实现获取验证码倒计时功能呢？下面小编给大家分享JS实现用户注册时获取短信验证码和倒计时的代码，一起看看吧
通过手机号注册，密码包括大写字母，小写字母，数字和特殊符号，产生随机验证码
weixin_65734716的博客
05-19 703
import java.util.Random; import java.util.Scanner; /*需求： * 分析： * 1.输入手机号（验证） * 2.输入密码（验证） * 3.产生验证码 * 4.输入验证码并验证 */ public class Task2 { static Scanner sc=new Scanner(System.in); public static void main(String[] args) { inputPhone(); inputPa...
shiro 账号密码和手机短信登入,重写realm
mo念的博客
09-18 1057
用户名密码使用的token自然是UsernamePasswordToken，我们可以参考UsernamePasswordToken，自定义PhoneToken，在不同的控制器中传入Token，然后由Realm判断当前的Token属于UsernamePasswordToken还是PhoneToken。 自定义Token： public class PhoneToken implements HostAuthenticationToken, RememberMeAuthenticationToken, Seri
用javascript写一个简单的登录表单，包含用户名、密码和手机号码。提交数据时验证用户名、密码和手机号输入格式。
m0_46177715的博客
02-08 9332
我的第一个博客 题目：写一个用于登录的表单，包含用户名、密码和手机号码。提交数据的时候，要求验证： 1. 用户名必须输入汉字； 2. 密码总共6位，前2位为字母，后4位为数字； 3. 手机号码符合中国大陆手机号码格式 如果输入错误，则在输入框后面显示对应的文本提示信息 代码： // 2.当失去焦点时,密码校验函数 function checkPassword(){ // ...
HTML表单验证(含用户名，密码，邮箱，手机号，验证码-验证)
热门推荐
qq_46015509的博客
06-09 4万+
HTML 表单登录js简单验证
【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面，路由式开发（附完整代码）
TIG_JS的博客
03-10 8747
Vue2+elementUI编写一个手机号验证码登录页面，路由式开发，正则判断手机号格式是否正确
php注册页面手机验证,PHP手机短信注册验证码，后台代码怎么写？
weixin_32310195的博客
03-09 195
现在会员制的网站和app越来越多，基本上都要求客户手机注册，用户看起来很简单的一个流程，后台程序确十分复杂，身为PHP开发者，后台的相应代码如果写？今天我就来分享一下注册验证码相关demo/* ** 类名：smsApi* 功能：硕达通短信接口请求类(网站：www.shdat.com)* 详细：构造硕达通短信接口请求，获取远程HTTP数据* 版本：1.0* 日期：2017-02-19* 说明：* 以...
【表单验证】用户名，密码，姓名，手机号
来日浅谈的博客
02-26 2813
【表单验证】用户名，密码，姓名，手机号用户名密码姓名手机号 用户名 var reg = /^[0-9a-zA-Z_\u3E00-\u9FA5]{3,15}$/;//3-115字节，允许字母数字下划线 var userName = $("#userName").val(); if (userName == "") { alert("用户名不能为空！"); return false; } else ...
用HTML和js做一个注册页面 包含用户名 密码 邮箱 手机号 验证码并做基本验证
04-01
以下是一个简单的注册页面，包含了用户名、密码、邮箱、手机号和验证码，并且实现了基本验证： ```html <!DOCTYPE html> <html> <head> <title>注册页面</title> <script type="text/javascript"> function validateForm() { var username = document.forms["registerForm"]["username"].value; var password = document.forms["registerForm"]["password"].value; var email = document.forms["registerForm"]["email"].value; var phone = document.forms["registerForm"]["phone"].value; var captcha = document.forms["registerForm"]["captcha"].value; // 验证用户名 if (username == "") { alert("用户名不能为空！"); return false; } // 验证密码 if (password == "") { alert("密码不能为空！"); return false; } // 验证邮箱格式 var emailRegex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; if (!emailRegex.test(email)) { alert("邮箱格式不正确！"); return false; } // 验证手机号格式 var phoneRegex = /^1[3456789]\d{9}$/; if (!phoneRegex.test(phone)) { alert("手机号格式不正确！"); return false; } // 验证验证码 if (captcha == "") { alert("验证码不能为空！"); return false; } } </script> </head> <body> <h1>注册页面</h1> <form name="registerForm" onsubmit="return validateForm()" method="post"> <label>用户名：</label> <input type="text" name="username"><br> <label>密码：</label> <input type="password" name="password"><br> <label>邮箱：</label> <input type="text" name="email"><br> <label>手机号：</label> <input type="text" name="phone"><br> <label>验证码：</label> <input type="text" name="captcha"><br> <input type="submit" value="注册"> </form> </body> </html> ``` 在这个页面中，我们通过 `document.forms` 获取表单元素，然后对用户输入的内容进行验证。如果某个输入框为空或格式不正确，就弹出提示框并返回 `false`，阻止表单提交。如果所有输入框都通过了验证，就返回 `true`，表单可以提交。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值