效果图
具体代码如下：
HTML部分
<template> <div class="pc"> <div class="top"><i class="el-icon-edit"></i> {{ school }}</div> <div class="form"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm"> <p style="height:100px;line-height: 100px;font-size:28px;text-align: center;">填写报名信息</p> <el-form-item label="姓名" prop="name" > <el-input v-model="ruleForm.name" placeholder="请输入你的名字"></el-input> </el-form-item> <el-form-item label="性别" prop="sex"> <el-select v-model="ruleForm.sex" placeholder="请选择"> <el-option value="男"></el-option> <el-option value="女"></el-option> </el-select> </el-form-item> <el-form-item label="证件类型" prop="id1"> <el-select v-model="ruleForm.id1" placeholder="身份证类型"> <el-option value="身份证"></el-option> </el-select> </el-form-item> <el-form-item label="证件号码" prop="id"> <el-input v-model="ruleForm.id"></el-input> </el-form-item> <el-form-item label="手机号" prop="iphone"> <el-input v-model="ruleForm.iphone"></el-input> </el-form-item> <el-form-item label="层次" prop="level"> <el-select v-model="ruleForm.level" placeholder="请选择" @change="getValue"> <el-option v-for="(item,index) in level " :key="index" :value="item"></el-option> </el-select> </el-form-item> <el-form-item label="专业" prop="major"> <el-select v-model="ruleForm.major" placeholder="请选择"> <el-option v-for="(item,index) in major " :key="index" :value="item"></el-option> </el-select> </el-form-item> <el-form-item label="招生老师" prop="teacher"> <el-select v-model="ruleForm.teacher" placeholder="请选择"> <el-option v-for="(item,index) in teacher " :key="index" :value="item.name"></el-option> </el-select> </el-form-item> <el-form-item label="验证码" prop="yzm" > <el-input class="lastbtn" v-model="ruleForm.yzm" placeholder="请输入验证码"></el-input> <div @click="refreshCode" class="lastbtn"> <identify :identifyCode="identifyCode" :contentWidth="120" :contentHeight="40" ></identify> </div> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" :plain="true" >提交</el-button> </el-form-item> </el-form> </div> </div> </template>
js部分
<script>import Identify from '../utiles/Identify.vue'// 导入import axios from 'axios'export default { data() { // 手机号 var checkMobile = (rule,value,cb) =>{ const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/ if (regMobile.test(value)) { //合法的手机号码 return cb() } cb(new Error('手机号码格式不正确')) } // 验证身份证号 let checkRegNo = (rule,value,callback) => { var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "}; var tip = ""; var pass= true; var patt1=new RegExp("(^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)|(^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{2}$)"); if(value == ''){ pass = true; }else if(!patt1.test(value)){ callback(new Error("身份证号格式错误")); pass = false; } else if(!city[value.substr(0,2)]){ callback(new Error("地址编码错误")); pass = false; }else{ //18位身份证需要验证最后一位校验位 if(value.length == 18){ value = value.split(''); //∑(ai×Wi)(mod 11) //加权因子 var factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ]; //校验位 var parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ]; var sum = 0; var ai = 0; var wi = 0; for (var i = 0; i < 17; i++) { ai = value[i]; wi = factor[i]; sum += ai * wi; } var last = parity[sum % 11]; if(parity[sum % 11] != value[17]){ callback(new Error("身份证号码错误")); pass =false; } } } if(pass){ callback(); } } return { identifyCodes: '1234567890', identifyCode: '', school:'', ruleForm: { name: '', sex: '', id1: '', id: '', iphone:'', level: '', major: '', teacher: '', }, level: [ ], school:'', major1:[], major:[], teacher:[], rules: { name: [ { required: true, message: '请输入你的名字', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' } ], sex: [ { required: true, message: '请选择性别', trigger: 'change' } ], id1: [ { required: true, message: '请选择证件类型', trigger: 'change' } ], id: [ { required: true, message: '请输入身份证号码', trigger: 'change' }, { validator: checkRegNo, trigger: "blur" } ], iphone: [ { required: true, message: '请输入手机号', trigger: 'change' }, { validator: checkMobile, trigger:'blur'} ], level: [ { required: true, message: '请选择层次', trigger: 'change' } ], major: [ { required: true, message: '请选择专业', trigger: 'change' } ], teacher: [ { required: true, message: '请选择招生老师', trigger: 'change' } ], yzm: [{ required: true, message: '验证码错误', trigger: 'blur' }, { type: 'string', min: 4, message: 'The yzm length cannot be less than 4 bits', trigger: 'blur' }] } }; }, components: { Identify }, created(){ // axios({ // url:'http://tool.yhfrjy.com/chengkao/yubaoming/data.php', // method:'get', // params:{} // }).then(res=>{ // console.log(res); // // this.level = res.data.level // }) var that = this // console.log(that.level) // console.log(that.major) // console.log(that.teacher) axios.post('load', { action: 'get_school_info', // 参数 firstName data: { school:'赣南医学院' } // 参数 lastName }) .then(function (response) { console.log(response.data); that.level = response.data.data.level that.major1 = response.data.data.major that.teacher = response.data.data.teacher // console.log(that.level) // console.log(that.major) // console.log(that.teacher) }) .catch(function (error) { console.log(error); }); // axios.post('http://xmt.com:8080/chengkao/yubaoming/data.php', { // action: 'get_school_info', // 参数 firstName // data:{school:'赣南医学院'} // 参数 lastName // }) // .then(function (response) { // console.log(response); // }) // .catch(function (error) { // console.log(error); // }); }, mounted () { this.identifyCode = '' this.makeCode(this.identifyCodes, 4) }, methods: { // 生成随机数 randomNum (min, max) { return Math.floor(Math.random() * (max - min) + min) }, // 切换验证码 refreshCode () { this.identifyCode = '' this.makeCode(this.identifyCodes, 4) }, // 生成四位随机验证码 makeCode (o, l) { for (let i = 0; i < l; i++) { this.identifyCode += this.identifyCodes[ this.randomNum(0, this.identifyCodes.length) ] } console.log(this.identifyCode) }, getValue(val){ console.log(val) this.major = this.major1[val] }, submitForm() { // this.dialogFormVisible = false; let formData = new FormData(); for(let key in this.ruleForm){ formData.append(key,this.ruleForm[key]); console.log(formData.get(key)); } axios({ method:"post", url:'load', headers: { "Content-Type": "multipart/form-data" }, // withCredentials:true, data:formData }).then((response)=>{ console.log(response); }); }, // submitForm(formName) { // this.$refs[formName].validate((valid) => { // if (valid) { // axios.post('http://tool.yhfrjy.com/chengkao/yubaoming/data.php', { // action: 'insert', // 参数 firstName // data:{ // }// 参数 lastName // }) // .then(function (response) { // console.log(response); // alert('提交成功！'); // }) // .catch(function (error) { // console.log(error); // }); // } else { // console.log('请重新填写正确信息！！'); // return false; // } // }); // }, },}</script>
