django后台添加学生-jquery实现表单正则表达式验证，判断是否可以进行提交

打不着的大喇叭

发布于 2024-03-11 16:13:31

680

发布于 2024-03-11 16:13:31

文章被收录于专栏：喇叭的学堂喇叭的学堂

话不多说，先放图

左边的导航就不放代码了，需要再问

(1)视图模板

(2)路由（urls.p）

(3)views.py

# GET：向服务器 获取 数据
# POST：向服务器 提交 数据
# 添加学生
def add_stu(request):
    # 当浏览器在访问该网址，其实就是向服务器获取数据，所以打开这个页面
    if request.method == "GET":
        return render(request, 'add_stu.html')
    else:
        # 获取提交的学生信息：get获取 input 的 name 名
        name = request.POST.get('name')
        sex = request.POST.get('sex')
        chinese = request.POST.get('chinese')
        math = request.POST.get('math')
        english = request.POST.get('english')
        total = float(chinese) + float(math) + float(english)

    # 添加到数据库
    StudentInfo.objects.create(name=name, sex=sex, chinese=chinese, math=math, english=english, total=total)

    # redirect提交完成后自动跳转，跳转回你的页面列表
    # return redirect("跳转别人的网站地址")
    return redirect('/stu/list/')

(4)models.py

你的模型要先搞好才能方便表单需要添加什么，模型跟我不一样也没事，后面的正则对就行

# 在应用student的model.py中，定义StudentInfo模型，该模型继承models.Model类
class StudentInfo(models.Model):
    name = models.CharField(max_length=32, verbose_name='姓名')
    sex = models.CharField(max_length=10, verbose_name='性别')
    chinese = models.FloatField(verbose_name='语文成绩', default=0)
    math = models.FloatField(verbose_name='数学成绩', default=0)
    english = models.FloatField(verbose_name='英语成绩', default=0)
    total = models.FloatField(verbose_name='总分', default=0)

（5）在add_list.html上添加分页html

用ul>li,方便css的编写， .you是右边的页面的大盒子，漏出底色（灰），区分我没有给出的左边导航栏.zuo .container是包着整个表单，同时把页面居中,漏出底色（白） .add_stu是包着整个表单，限制宽度

<div class="you">
    <div class="container">
        <div class="add_stu">
            <h3>
                添加学生信息
                <a href="/stu/list/">
                    <em>返回</em>学生列表
                </a>
            </h3>
            <div class="add_form">
                {# method: 规定用于发送表单数据的 HTTP 方法。#}
                {# action: 当提交表单时，发送表单数据到名为 "" 的文件（处理输入）：#}
                <form method="post">
                    {#  是一种数据提交的验证机制, 保证安全  #}
                    {% csrf_token %}

                    <ul>
                        <li>
                            <label for="name"><span>姓名</span>：</label>
                            <input type="text" id="name" name="name" autocomplete="off" title="姓名只能输入中文和英文,且长度在2-20个字符之内" placeholder="请输入...">
                            <span></span>
                        </li>
                        <li>
                            <label for=" "><span>性别</span>：</label>
                            {#  这里的按钮提交的到views获取的是 value里面的值  #}

                            <input type="radio" id="male" name="sex" value="男" checked>
                            <label for="male">男</label>

                            <input type="radio" id="famale" name="sex" value="女">
                            <label for="famale">女</label>
                        </li>
                        <li>
                            <label for="chinese"><span>语文成绩</span>：</label>
                            <input type="number" id="chinese" name="chinese" autocomplete="off" title="成绩只能为1~100的数，小数可以有两位" placeholder="请输入...">
                            <span></span>

                        </li>
                        <li>
                            <label for="math"><span>数学成绩</span>：</label>
                            <input type="number" id="math" name="math" autocomplete="off" title="成绩只能为1~100的数，小数可以有两位" placeholder="请输入...">
                            <span></span>

                        </li>
                        <li>
                            <label for="english"><span>英语成绩</span>：</label>
                            <input type="number" id="english" name="english" autocomplete="off" title="成绩只能为1~100的数，小数可以有两位" placeholder="请输入...">
                            <span></span>
                        </li>
                        <li>
                            {#  提交数据  #}
                            <input type="submit" value="提 交" class="sub">
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
</div>

（6）css模板

具体的宽度，位置需要自己定制，我设置的时候，用了flex布局，没有左边的nav，就失去作用了，所以可以去掉

* {
    /* 把我们所有标签的内外边距清零 */
    margin: 0;
    padding: 0;
    /* CSS3盒子模型 */
    box-sizing: border-box;
}

em,
i {
    /* em 和 i 群体的文字不倾斜 */
    font-style: normal;
}

li {
    /* 去掉li的小元圆点 */
    list-style: none;
}

img {
    /* border: 0; 照顾低版本的浏览器 如果 图片外面包括了链接会有边框的问题 */
    border: 0;
    /* 取消图片底测有空白缝隙的问题 */
    vertical-align: middle;
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer;
}

a {
    color: #bdbdbd;
    text-decoration: none;
}

.fda:hover {
    transform: scale(1.1);
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有黑色边框，我们需要去掉 */
    border: 0;
    /* 去掉表单轮廓 */
    outline: none;
}

/* 去掉input，type为number时的上下箭头 */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
form {
    display: inline;
}
input[type=number] {
    padding-left: 17px;
    margin-right: 5px;
    width: 200px;
    height: 37px;
    color: #3d464d;
    border: 1px solid #cdd1d5;
    border-radius: 10px;
}
input[type=submit] {
    padding: 8px 20px;
    background-color: #5596e4;
    border: 0;
    font-size: 13px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
}

.button {
    display: inline-block;
    margin: 0 20px;
    text-align: center;
    font-size: 13px;
    border-radius: 10px;
}

.button a {
    display: inline-block;
    padding: 8px 20px;
    color: #fff;
}

body {
    /* CSS3 抗锯齿性 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    display: flex;
    font-size: 15px;
    color: #636363;
    background-color: #f5f5f5;
    font-family: "microsoft yahei","Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hide,
.none {
    display: none;
}


/* 清除浮动 */

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0;
}

.clearfix {
    *zoom: 1;
}

/* 左边（不管，这个是左边的nav导航） */

.zuo {
    flex: 1;
    height: 750px;
    text-align: center;
    background-color: #222324;
}


/* 右边 */

.you {
    position: relative;
    /*（flex当.zuo没了，就不起作用）*/
    flex: 6;
    margin: 0 30px;
    height: 740px;
    background-color: #f5f5f5;
}

.container {
    margin-top: 30px;
    height: 700px;
    background-color: #fff;
    overflow: hidden;
}

.add_stu {
    margin: 50px auto 0;
    width: 900px;
    border: 1px solid #ccc;
}

.add_stu h3 {
    height: 40px;
    background-color: #ececec;
    padding: 0 10px;
    font-weight: 400;
    line-height: 40px;
    font-size: 18px;
    border-bottom: 1px solid #ccc;

}

.add_stu h3 a {
    float: right;
    font-size: 14px;
    color: #636363;
}

.add_stu em {
    color: #c81623;
}

.add_form {
    margin: 60px auto 0;
    padding-left: 32px;
    width: 550px;
    /* 这里的高度，撑起下边宽 */
    height: 420px;
}

.add_form li {
    margin-bottom: 25px;
}

.add_form li label:nth-child(1) {
    display: inline-block;
    width: 80px;
    height: 36px;
    line-height: 36px;
    text-align: right;
}

#name {
    padding-left: 17px;
    margin-right: 5px;
    width: 200px;
    height: 37px;
    color: #3d464d;
    border: 1px solid #cdd1d5;
    border-radius: 10px;
}

.add_form li .sub {
    margin-left: 130px;
    width: 145px;
}

#male, #famale {
    margin-left: 25px;
    margin-right: 5px;
    width: 14px;
    height: 14px;
}

/* 验证表单时的提示状态颜色 */
.success {
    color: #40b83f;
    font-size: 13px;

}

.error {
    color: #df3033;
    font-size: 13px;
}
/* 验证表单时的状态图片的宽度*/
.icon {
    width: 23px;
}

（7）js模板（记得引入jq）

这里，我用了jq，定义一个regadd函数，里面用了blur失去焦点事件验证表单输入是否正确，判断状态，提示是否输入正确

函数不需要变（里面的图片去iconfont-阿里巴巴矢量图标库找），传参可以根据需要你的需求，做你自己的，只需要去找对应的正则表达式
其他的看我代码的解析（解析写的巨详细，有问题call我）

$(function() {
    // 正则，按照需要输入
    var regname = /^([\u4e00-\u9fa5]{2,20}|[a-zA-Z.\s]{2,20})$/; // 姓名的正则表达式[只能输入中文、英文]
    var regscore = /^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/; //成绩的正则表达式

    // 判断穿进的input表单的内容是否符合正则表达式
    regadd($("#name"),regname)
    regadd($("#chinese"),regscore)
    regadd($("#math"),regscore)
    regadd($("#english"),regscore)

    function regadd(ele, add) {
        $(ele).blur(function() {
            // add.test(this.value) add是正则表达式，是用test函数正则验证，this.value是传进来的表单input的输入的值，正确返回true，错误返回false
            if (add.test(this.value)) {
                // 失去焦点就去掉 error 这个css类，添加success类，表示验证成功
                // $(this).next()是获取当前表单input下面的span标签
                $(this).next().removeClass("error");
                $(this).next().addClass("success");
                // right.png可以去阿里图标库找（颜色：#39ba36）
                // html(): 是在当前表单input下面的span标签里面【替换】下面的标签内容
                $(this).next().html('<img src="/static/images/right.png" class="icon"> 恭喜您输入正确');
                // 验证成功就去掉最后提交表单的禁止点击的属性
                // 如果有的输入表单没有验证成功会禁用，这个在后面点击提交事件中写了
                $('.sub').removeAttr('disabled')
            } else {
                $(this).next().removeClass("success");
                $(this).next().addClass("error");
                // error.png可以去阿里图标库找（颜色：#e12d2c）
                $(this).next().html('<img src="/static/images/error.png" class="icon"/> '+ $(this).prev().children().html() +'格式不正确，请重新输入')
            }
        })
    }

    // 判断是否所有表单都正确
    // 设置属性：attr("属性", "属性值")    .val:获取当前表单的输入值
    // 点击提交表单触发
    $(".sub").click(function() {
        if (regname.test($('#name').val()) && regscore.test($('#chinese').val()) && regscore.test($('#math').val()) && regscore.test($('#english').val())) {
            // 如果上面四个表单验证成功，点击提交的时候触发去掉禁用提交属性
            $('.sub').removeAttr('disabled')
        } else if ($('#name').val() === '' || $('#chinese').val() === '' || $('#math').val() === '' || $('#english').val() === '') {
            // 如果上面四个表单没有输入，点击提交的时候触发加上禁用提交属性
            $(this).attr('disabled', 'disabled')
        } else {
            $(this).attr('disabled', 'disabled')
        }
    })
})

如果没有给你帮助，我很抱歉，如果你最后成功了，恭喜你

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-05-15，如有侵权请联系 cloudcommunity@tencent.com 删除

表单