PC端申请表
作者:互联网
公司项目需求中要做用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