PC端申请表

2021-12-05 15:31:35 阅读：129 来源： 互联网

标签：申请表 val else PC alert var 填写 null

公司项目需求中要做用html做一个PDF申请表的样式出来。有点意思，贴上来大家看看。

先上效果图：

附上源代码：

HTML：

<div id="form">
        <h2>轻工行业职业技能等级评价考生申请表</h2>
        <table cellspacing="0" border="1px" class="table">
            <tr>
                <td style="width: 50px;" colspan="2">姓名</td>
                <td style="width: 70px;" colspan="2"><input class="a1" style="width: 85px;" type="text" value="" /></td>
                <td style="width: 50px;" colspan="2">性别</td>
                <td style="width: 60px;" colspan="2">
                    <div>
                        <select class="a2">
                            <option value="">请选择</option>
                            <option value="010">男</option>
                            <option value="021">女</option>
                        </select>
                    </div>
                </td>
                <td style="width: 80px;" colspan="2">文化程度</td>
                <td style="width: 120px;" colspan="2">
                    <div>
                        <select class="a3">
                            <option value="">请选择</option>
                            <option value="本科">本科</option>
                            <option value="研究生">研究生</option>
                            <option value="专科">专科</option>
                            <option value="高中及高中以下">高中及高中以下</option>
                        </select>
                    </div>
                </td>
                <td style="width: 120px;" colspan="2">联系电话</td>
                <td colspan="3" rowspan="5" style="width: 130px">
                    <!-- ifshow用于点击后隐藏 -->
                    <div class="ifshow">上传图片</div>
                    <input style="width: 80px;height: 30px;" type="file" id="picFile" onchange="readFile(this)" />
                    <img id="img" src="" alt="" style="width: 130px;" />
                </td>
            </tr>

            <tr>
                <td colspan="4">身份证号码</td>
                <td colspan="8">
                    <input id="idcard" class="a4" onblur="check1()" type="text" value="" style="width: 300px;" />
                </td>
                <td colspan="2">
                    <input id="phone" class="a5" onblur="check2()" type="text" value="" style="width: 120px;" />
                </td>
            </tr>

            <tr>
                <td colspan="2">工作单位</td>
                <td colspan="8">
                    <input class="a6" type="text" value="" style="width: 260px;" />
                </td>
                <td colspan="2">参加工作时间</td>
                <td colspan="2">
                    <!-- 参加工作时间选择器 -->
                    <el-date-picker class="a7" v-model="value1" type="month" placeholder="请选择"
                        style="width: 120px;font-size: 16px;" format="yyyy年MM月">
                    </el-date-picker>
                </td>
            </tr>

            <tr>
                <td colspan="8">从事本职业(工种)工龄</td>
                <td colspan="2">
                    <div>
                        <select class="a8">
                            <option value="">请选择</option>
                            <option value="1年">1年</option>
                            <option value="1-3年">1-3年</option>
                            <option value="3-5年">3-5年</option>
                            <option value="5年以上">5年以上</option>
                        </select>
                    </div>
                </td>
                <td colspan="2">现工作岗位</td>
                <td colspan="2">
                    <input class="a9" type="text" value="" style="width: 120px;" />
                </td>
            </tr>

            <tr>
                <td colspan="2">联系地址</td>
                <td colspan="12">
                    <input class="a10" type="text" value="" style="width: 500px;" />
                </td>
            </tr>

            <tr>
                <td colspan="8">原证书职业名称及等级</td>
                <td colspan="4">
                    <input class="a11" type="text" value="" style="width: 200px;" />
                </td>
                <td colspan="2">原证书编号</td>
                <td colspan="3">
                    <input class="a12" type="text" value="" style="width: 130px;" />
                </td>
            </tr>

            <tr>
                <td colspan="4">申报职业</td>
                <td colspan="4">
                    <input class="a13" type="text" value="" style="width: 110px;" />
                </td>
                <td colspan="2">申报等级</td>
                <td colspan="2">
                    <input class="a14" type="text" value="" style="width: 120px;" />
                </td>
                <td colspan="2">原证书时间</td>
                <td colspan="3">
                    <!-- 原证书时间选择器 -->
                    <el-date-picker class="a15" v-model="value2" type="month" placeholder="请选择"
                        style="width: 130px;font-size: 16px;" format="yyyy年MM月">
                    </el-date-picker>
                </td>
            </tr>

            <tr>
                <td colspan="4">获奖情况</td>
                <td colspan="13">
                    <input class="a16" type="text" value="" style="width: 570px;" />
                </td>
            </tr>

            <tr>
                <td rowspan="2" colspan="2">本人工作简历</td>
                <td colspan="4">起止时间</td>
                <td colspan="6">何地何部门</td>
                <td colspan="2">职业(工种)</td>
                <td colspan="3">证明人</td>
            </tr>

            <tr>
                <td colspan="4">
                    <!-- 工作简历时间选择器 -->
                    <div>
                        <el-date-picker class="a17" v-model="value3" type="month" placeholder="请选择"
                            style="width: 120px;font-size: 16px;" format="yyyy年MM月">
                        </el-date-picker>
                    </div>
                    <div style="margin: -3px 0;">至</div>
                    <div>
                        <el-date-picker class="a18" v-model="value4" type="month" placeholder="请选择"
                            style="width: 120px;font-size: 16px;" format="yyyy年MM月">
                        </el-date-picker>
                    </div>
                </td>
                <td colspan="6">
                    <input class="a19" type="text" value="" style="width: 260px;height: 100px;" />
                </td>
                <td colspan="2"><input class="a20" type="text" value="" style="width: 120px;height: 100px;" /></td>
                <td colspan="3"><input class="a21" type="text" value="" style="width: 130px;height: 100px;" /></td>
            </tr>

            <tr>
                <td rowspan="6" colspan="2">评价机构</td>
                <td colspan="4">评价职业</td>
                <td colspan="4">
                    <input type="text" value="" style="width: 140px;" />
                </td>
                <td rowspan="5" colspan="2">工作单位</td>
                <td rowspan="5" colspan="5">
                    <div style="margin-left:140px">
                        <div style="margin-top:110px; margin-bottom: 10px;">(盖 章)</div>
                        <div>
                            <span style="margin-right: 20px">年</span>
                            <span style="margin-right: 20px">月</span>
                            <span>日</span>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td colspan="4">评价等级</td>
                <td colspan="4"><input type="text" value="" style="width: 140px;" /></td>
            </tr>

            <tr>
                <td colspan="4">理论成绩</td>
                <td colspan="4"><input type="text" value="" style="width: 140px;" /></td>
            </tr>
            <tr>
                <td colspan="4">技能成绩</td>
                <td colspan="4"><input type="text" value="" style="width: 140px;" /></td>
            </tr>
            <tr>
                <td colspan="4">综合评审</td>
                <td colspan="4"><input type="text" value="" style="width: 140px;" /></td>
            </tr>

            <tr>
                <td colspan="8" style="height: 120px;">
                    <div style="margin-left:140px">
                        <div style="margin-top:50px; margin-bottom: 10px;">(盖 章)</div>
                        <div>
                            <span style="margin-right: 20px">年</span>
                            <span style="margin-right: 20px">月</span>
                            <span>日</span>
                        </div>
                    </div>
                </td>
                <td colspan="2">
                    轻工业职业<br />
                    能力评价总<br />
                    站或直属基<br />
                    地
                </td>
                <td colspan="5">
                    <div style="margin-left:140px">
                        <div style="margin-top:50px; margin-bottom: 10px;">(盖 章)</div>
                        <div>
                            <span style="margin-right: 20px">年</span>
                            <span style="margin-right: 20px">月</span>
                            <span>日</span>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td colspan="2" style="height: 150px">本人签字</td>
                <td colspan="8">
                    以上内容全部属实，申请人签字
                    <div style="margin-left:140px">
                        <div style="margin-top:68px; margin-bottom: 10px;">(签 字)</div>
                        <div>
                            <span style="margin-right: 20px">年</span>
                            <span style="margin-right: 20px">月</span>
                            <span>日</span>
                        </div>
                    </div>
                </td>
                <td colspan="2">
                    中国轻工业<br />
                    联合会职业<br />
                    能力评价中
                    <br />心
                </td>
                <td colspan="5">
                    <div style="margin-left:140px">
                        <div style="margin-top:90px; margin-bottom: 10px;">(盖 章)</div>
                        <div>
                            <span style="margin-right: 20px">年</span>
                            <span style="margin-right: 20px">月</span>
                            <span>日</span>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <div style="font-size: 13px; line-height: 20px;text-align: left;">
            此页一式两份，需附毕业证复印件、身份证复印件、学生证复印件、职称证书复印件、相关专业职业资格证书或技能等级证书复印件、工作证明、获奖证书复印件等。表中所填内容擅自更改或删减视为无效。
        </div>
        <div>
            <span>手机验证码:</span>
            <input class="verification-code" placeholder="请输入验证码" type="text" value=""
                style="width: 140px;border: 1px solid rgb(199, 198, 198); " />
            <button onclick="getCode()" class="getCode" type="button" style="height: 35px;position: relative;
            top: 2px;">获取验证码
            </button>
        </div>
        <div style="margin-top: 5px;">
            <button type="button" onclick="submit()" style="font-size :20px;width: 80px;height: 45px;">提交</button>
        </div>
    </div>
</div>

JS：

//图片上传
function readFile(obj) {
    var file = obj.files[0];
    //判断类型是不是图片 
    if (!/image\/\w+/.test(file.type)) {
        alert("请确保文件为图像类型");
        return false;
    } else {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            dealImage(this.result, {
                quality: 0.5
            }, function (base) {
                //调用
                var blob = dataURLtoBlob(base);
                var newFile = new File([blob], file.name, {
                    type: file.type
                });
                console.log(newFile)
                let r = new FileReader(); //本地预览
                r.onload = function () {
                    $('#img').attr("src", r.result);
                    //将上传图片字体隐藏起来
                    $('.ifshow').hide();
                }
                r.readAsDataURL(newFile); //Base64
                // upload(newFile);
            });
        }
    }
}
//将base64转换为blob
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
}

function upload(file) {
    var that = this;
    // 创建form对象
    let param = new FormData();
    // 通过append向form对象添加数据
    param.append('img', file);
    // 文件大小
    param.append('size', file.size);
    for (var n in that.params) {
        param.append(n, that.params[n]);
    }
    // 创建ajax
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        console.log(xhr.responseText)
    }
    xhr.open("POST", "yourapi", true);
    // 发送表单数据
    xhr.send(param);
}
/**
 * 图片压缩，默认同比例压缩
 * @param {Object} path
 * pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
 * @param {Object} obj
 * obj 对象 有 width， height， quality(0-1)
 * @param {Object} callback
 * 回调函数有一个参数，base64的字符串数据
 */
function dealImage(path, obj, callback) {
    var img = new Image();
    img.src = path;
    img.onload = function () {
        var that = this;
        // 默认按比例压缩
        var w = that.width,
            h = that.height,
            scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = obj.quality || 0.7; // 默认图片质量为0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
            quality = obj.quality;
        }
        // quality值越小，所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回调函数返回base64的值
        callback(base64);
    }
}

//身份证号码验证
function check1() {
    //获取身份证号码值
    let idcard = $('#idcard').val();
    //先用正则判断是否为正确的格式
    let partn = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    if (partn.test(idcard) == false) {
        $('.a4').val('');
        alert('请检查身份证号码格式是否正确');
        return false;
    } else {
        let number = [...idcard]; //es6语法，利用...将变量的值转成数组。
        let ration = new Array("7", "9", "10", "5", "8", "4", "2", "1", "6", "3", "7", "9", "10", "5", "8", "4", "2"); //系数
        let ration22 = new Array("1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2");
        let sum = 0;
        console.log(ration);
        for (let i = 0; i < number.length - 1; i++) {
            sum = number[i] * ration[i] + sum;
            console.log(i);
        }
        let mod = sum % 11;
        if (ration22[mod] == number[17]) {

        } else {
            $('.a4').val('');
            alert('最后一位校验错误');
        }
    }
}

//手机号验证
function check2() {
    //获取手机号值
    let phone = $('#phone').val();
    //先用正则判断是否正确
    let b = /^1(3|4|5|6|7|8|9)\d{9}$/;
    if (b.test(phone)) {
        return true;
    } else {
        $('a5').val('');
        alert('请检查手机号是否正确');
        return false;
    }
}

//获取验证码
function getCode() {
    //获取手机号值
    var phone = $('#phone').val();
    //先用正则判断是否正确
    var b = /^1(3|4|5|6|7|8|9)\d{9}$/;
    if (!b.test(phone)) {
        $('a5').val('');
        alert('手机号输入有误！请重新输入');
        return;
    } else {
        //本地接口还没有弄好，直接codetime(60)
        codetime(60)
        // $.ajax({
        // type: 'POST',
        // headers: {},
        // url: "接口",
        // data: {
        //     'phone': phone
        // },
        //     success: function (data) {
        //         if (data == 456) {
        //             alert.msg("验证码在三分钟之内都有效,无需重新获取");
        //         } else {
        //             codetime(60);
        //         }
        //     }
        // })
    }
}
//codetime函数注释
function codetime(time) {
    var _this = $(".getCode");
    if (time == 0) {
        _this.attr("disabled", false);
        _this.html("发送验证码");
        _this.css('background-color', '#409eff');
        _this.css('color', 'white');
    } else {
        _this.attr("disabled", true);
        _this.html("重新发送(" + time + ")");
        _this.css('background-color', '#fafafa');
        _this.css('color', '#999');
        time--;
        setTimeout(function () {
            codetime(time);
        }, 1000)
    }
}

//提交前的验证
function submit() {
    a1 = $('.a1').val()
    a2 = $('.a2').val()
    a3 = $('.a3').val()
    a4 = $('.a4').val()
    a5 = $('.a5').val()
    a6 = $('.a6').val()
    a7 = $('.a7').val()
    a8 = $('.a8').val()
    a9 = $('.a9').val()
    a10 = $('.a10').val()
    a11 = $('.a11').val()
    a12 = $('.a12').val()
    a13 = $('.a13').val()
    a14 = $('.a14').val()
    a15 = $('.a15').val()
    a16 = $('.a16').val()
    a17 = $('.a17').val()
    a18 = $('.a18').val()
    a19 = $('.a19').val()
    a20 = $('.a20').val()
    a21 = $('.a21').val()
    verificationCode = $('.verification-code').val()
    if (a1 == "" || a1 == null) {
        alert('请填写姓名');
    } else if (a2 == "" || a2 == null) {
        alert('请填写性别');
    } else if (a3 == "" || a3 == null) {
        alert('请填写文化程度');
    } else if (a4 == "" || a4 == null) {
        alert('请填写身份证号码');
    } else if (a5 == "" || a5 == null) {
        alert('请填写联系电话');
    } else if (a6 == "" || a6 == null) {
        alert('请填写工作单位');
    } else if (a7 == "" || a7 == null) {
        alert('请填写参加工作时间');
    } else if (a8 == "" || a8 == null) {
        alert('请填写工龄');
    } else if (a9 == "" || a9 == null) {
        alert('请填写现工作岗位');
    } else if (a10 == "" || a10 == null) {
        alert('请填写联系地址');
    } else if (a11 == "" || a11 == null) {
        alert('请填写原证书职业名称及等级');
    } else if (a12 == "" || a12 == null) {
        alert('请填写原证书编号');
    } else if (a13 == "" || a13 == null) {
        alert('请填写申报职业');
    } else if (a14 == "" || a14 == null) {
        alert('请填写申报等级');
    } else if (a15 == "" || a15 == null) {
        alert('请填写原证书时间');
    } else if (a16 == "" || a16 == null) {
        alert('请填写获奖情况');
    } else if (a17 == "" || a17 == null) {
        alert('请填写工作简历开始时间');
    } else if (a18 == "" || a18 == null) {
        alert('请填写工作简历结束时间');
    } else if (a19 == "" || a19 == null) {
        alert('请填写何地何部门');
    } else if (a20 == "" || a20 == null) {
        alert('请填写职业(工种)');
    } else if (a21 == "" || a21 == null) {
        alert('请填写证明人');
    } else if (verificationCode == '' || verificationCode == null) {
        alert('请填写验证码')
    } else {
        alert('提交成功')
    }
}

时间选择器中引入了element-ui

CSS：
//时间选择器的样式只能用 scoped实现
<style scoped>
    .el-input__inner {
        border: none;
        color: black;
        width: 120px;
    }

    .el-input--prefix .el-input__inner {
        padding: 0;
    }

    .el-input__icon {
        display: none;
    }
</style>

其他：
html,
body,
div,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
form,
input,
textarea,
th,
td,
select {
	margin: 0;
	padding: 0;
}
body {
	text-align: center;
}
#form {
	margin: 0 auto;
	width: 744px;
}
.table {
	margin: 0 auto;
}
input {
	height: 35px;
	font-size: 16px;
	text-align: center;
	box-sizing: border-box;
	/* 去掉input的边框和点击时的边框 */
	border: none;
	outline: medium;
}
select {
	/*清除select默认样式*/
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	/* 去掉select的边框和点击时的蓝色边框 */
	border: none;
	outline: none;

	font-size: 16px;
	text-align: center;
}
button{
	font-size: 18px;
	color: white;
	background-color:#409eff;
	border: 1px solid rgb(199, 198, 198); 
	border-radius: 5px;
}

标签：申请表,val,else,PC,alert,var,填写,null
来源： https://www.cnblogs.com/webgo/p/15645729.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

PC端申请表