前端基础Day04

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="renderer" content="webkit"><link r

华山栈道

1381人浏览 · 2021-04-27 13:10:16

华山栈道 · 2021-04-27 13:10:16 发布

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="js/lib/icheck/icheck.css">
    <link rel="stylesheet" href="js/lib/chosen/chosen.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/form.css">
    <title>表单</title>
</head>

<body>
    <div class="main container">
        <h2 class="main-title">个人信息修改</h2>
        <form id="createform" class="mt20">
            <div class="form-row">
                <div class="form-item">
                    <span class="lbl">姓名：</span>
                    <input type="text" class="txt" placeholder="请输入姓名" name="name" autocomplete="off" />
                </div>
            </div>
            <div class="form-row">
                <div class="form-item">
                    <span class="lbl">性别：</span>
                    <label class="radio">
                        <input type="radio" name="sex" value="1" autocomplete="off" />男
                    </label>
                    <label class="radio">
                        <input type="radio" name="sex" value="2" autocomplete="off" />女
                    </label>
                </div>
            </div>
            <div class="form-row">
                <div class="form-item">
                    <span class="lbl">出生日期：</span>
                    <input type="text" class="txt" placeholder="请选择出生日期" name="birthday" id="birthday"
                        autocomplete="off" />
                </div>
            </div>
            <div class="form-row">
                <div class="form-item">
                    <span class="lbl">班级：</span>
                    <select id="selclass" name="class" data-placeholder="请选择班级">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-item">
                    <span class="lbl">手机号码：</span>
                    <input type="text" class="txt" placeholder="请输入手机号码" name="phonenumber" />
                </div>
            </div>
            <div class="form-row">
                <div class="form-item">
                    <span class="lbl">住址：</span>
                    <input type="text" placeholder="请输入住址" class="txt" name="address" autocomplete="off" />
                </div>
            </div>
            <div class="form-row">
                <div class="form-item">
                    <span class="lbl">爱好：</span>
                    <label class="checkbox"><input type="checkbox" name="hobby" value="1" />写代码</label>
                    <label class="checkbox"><input type="checkbox" name="hobby" value="2" />还是写代码</label>
                    <label class="checkbox"><input type="checkbox" name="hobby" value="3" />一直都是写代码</label>
                </div>
            </div>
            <div class="form-row">
                <div class="form-item">
                    <span class="lbl">个人简介：</span>
                    <textarea class="txtarea" name="profile" autocomplete="off"></textarea>
                </div>
            </div>
            <div class="form-btnbar">
                <a class="btn btn-submit" href="javascript:;">提交</a>
                <a class="btn btn-cancel" href="javascript:;">取消</a>
            </div>
        </form>
    </div>

    <!-- 接口配置 -->
    <script>
        var loadClassData = 'https://fe.epoint.com.cn/mock/217/Rest/loadClassData', // 获取班级下拉列表
            loadDataByGuid = 'https://fe.epoint.com.cn/mock/217/Rest/loadDataByGuid', // 获取个人信息
            submitData = 'https://fe.epoint.com.cn/mock/217/Rest/submitData'; // 提交数据
    </script>

    <script src="js/lib/jquery-1.12.min.js"></script>
    <script src="js/lib/chosen/chosen.jquery.min.js"></script>
    <script src="js/lib/layer/layer.js"></script>
    <script src="js/lib/icheck/icheck.min.js"></script>
    <script src="js/lib/laydate/laydate.js"></script>
    <script src="js/lib/jquery.validate/jquery.validate.min.js"></script>
    <script src="js/lib/jquery.validate/additional-methods.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/form.js"></script>
</body>

</html>


.main-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding: 20px 0;
}

.form-row {
    margin-bottom: 20px;
    min-height: 30px;
    line-height: 30px;
}

.form-item>.lbl {
    display: block;
    float: left;
    width: 300px;
    text-align: right;
    margin-right: 10px;
    height: 30px;
}

.form-item>.txt {
    width: 360px;
    height: 30px;
    border: 1px solid #d2d2d2;
    line-height: 30px;
    padding-left: 10px;
    transition: all linear 200ms;
    outline: none;
}

.form-item>.txtarea {
    width: 360px;
    height: 100px;
    border: 1px solid #d2d2d2;
    padding: 10px;
    transition: all linear 200ms;
    resize: none;
    line-height: 20px;
}

.form-item>.radio,
.form-item>.checkbox {
    margin-right: 30px;
    cursor: pointer;
}

.form-item>.radio>div,
.form-item>.checkbox>div {
    margin-right: 10px;
}

.form-item>select {
    width: 360px;
}

.form-item>.txt:focus,
.form-item>.txtarea:focus {
    border-color: #7fcbf7;
    box-shadow: 2px 3px 3px #f6f8f9 inset;
}

.form-btnbar {
    padding: 20px 0;
    text-align: center;
}

label.error {
    padding-left: 22px;
    line-height: 30px;
    color: #ff3030;
    clear: both;
    font-size: 12px;
    display: inline-block;
    height: 30px;
    background: url("../images/bg.png") no-repeat 5px center;
    vertical-align: top;
}

.btn {
    display: inline-block;
    padding: 0 12px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background-color: #337ab7;
}

.btn.btn-submit {
    background-color: #5cb85c;
}

.btn.btn-cancel {
    background-color: #5bc0de;
}

.btn.btn-submit:hover {
    background-color: #449d44;
}

.btn.btn-cancel:hover {
    background-color: #31b0d5;
}

/**！
*表单页面
*date:2020-05-18
*author: xulei;
*/

(function (win, $) {
    var guid = '1'; // 测试用户

    var $createform = $("#createform"),      //表单
        $selclass = $("#selclass", $createform);

    //美化表单
    var initForm = function () {
        $(':radio,:checkbox', $createform).iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue'
        });
        laydate.render({
            elem: '#birthday',
            showBottom: false,
            format: 'yyyy年MM月dd日'
        });

        $selclass.chosen({
            disable_search: true
        });
    };

    //验证表单
    var validator = $createform.validate({
        errorPlacement: function (error, element) {
            $(element).closest(".form-item").append($(error));
        },
        ignore: "",
        rules: {
            name: {
                required: true,
                minlength: 2,
                maxlength: 5,
                nowhitespace: true
            },
            birthday: {
                required: true
            },
            class: {
                required: true
            },
            phonenumber: {
                required: true,
                // phonenumber: true
            }
        },
        messages: {
            name: {
                required: "请输入姓名",
                minlength: "不能少于2个字符",
                maxlength: "不能超过5个字符",
                nowhitespace: "不能包含空格"
            },
            birthday: {
                required: "请选择日期"
            },
            class: {
                required: "请选择班级"
            },
            phonenumber: {
                required: "请输入手机号",
                phonenumber: "手机号不正确"
            }
        },
    });

    // 提交表单
    var submitForm = function () {
        if (!$createform.valid()) {
            return;
        }
        var params = $createform.serializeObject();
        Util.ajax({
            url: submitData,
            data: params,
            success: function (data) {
//              data = data.custom;
                layer.msg(data.success ? "保存成功！" : data.message);
            }
        });
    };

    //获取班级下拉框数据
    Util.ajax({
        url: loadClassData,
        async:false,
        data: {
            "guid": guid
        },
        success: function (data) {
            $.each(data.listData, function (i, e) {
                $selclass.append("<option value='" + e.value + "'>" + e.text + "</option>");
            });
        }
    });

    // 加载已填数据
    Util.ajax({
        url: loadDataByGuid,
        data: {
            "guid": guid
        },
        success: function (data) {
            $createform.loadData(data);
            initForm();
        }
    });
    
    //点击提交
    $(".btn-submit").on("click",function(){
    	submitForm();
    });
}(window, jQuery));