vue 自定义验证element ui

image.png
image.png image.png image.png
image.png

  <el-form :rules="shiftRules" ref="shiftForm" :model="zhikongtemp" label-position="left" label-width="100px" style="padding: 20px;">
                                <el-form-item label="发票代码" prop="invoice_code">
                                    <el-input size="mini" v-model="zhikongtemp.invoice_code" placeholder="发票代码" />
                                </el-form-item>
                                <el-form-item label="发票号码" prop="invoice_number">
                                    <el-input size="mini" v-model="zhikongtemp.invoice_number" placeholder="发票号码" />
                                </el-form-item>
                                <el-form-item label="发票日期" prop="invoice_date">
                                    <el-date-picker size="mini" v-model="zhikongtemp.invoice_date" type="date" placeholder="发票日期"></el-date-picker>
                                </el-form-item>
                                <el-form-item label="发票金额" prop="invoice_fee">
                                    <el-input size="mini" v-model="zhikongtemp.invoice_fee" placeholder="发票金额" />
                                </el-form-item>
                                <el-form-item label="备注" prop="textarea">
                                    <el-input type="textarea" autosize v-model="zhikongtemp.remark" placeholder="请填写" />
                                </el-form-item>
                                <el-form-item label="上传图片" prop="fileList">
                                    <el-upload :limit="1" list-type="picture" :on-preview="handlePictureCardPreview" :headers="{'X-CSRF-TOKEN':'{{ csrf_token() }}'}" class="upload-demo" action="/Upload/image_upload" :on-change="handleChange" :before-upload="beforeAvatarUpload" :on-remove="removeFiles" :on-success="handleAvatarSuccess" :file-list="fileList">
                                        <el-button size="mini" type="primary">点击上传(单文件限10M内BMP/JPG/PNG/PDF格式)</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="zhikongUpdate_dialog = false">取 消</el-button>
                                <el-button type="primary" @click="save_data('shiftForm')">确 定</el-button>
                            </span>

 let percent = /^\d{12,}$/;
                let validate_invoice_code = (rule, value, callback) => {
                    // console.log(typeof(value))
                    if (value === ''||value==undefined) {
                        return callback(new Error('请填写发票代码'))
                      }
                    else if (!percent.test(value)) {
                        return callback(new Error('请输入正确格式的发票代码'))
                    } else {
                        callback()
                    }
                }

 shiftRules: { // 修改密码表单规则
                        invoice_date: [{
                            required: true,
                            message: '请选择发票日期',
                            trigger: 'change'
                        }],
                        invoice_code: [{
                            required: true,
                            // message: '请填写发票代码',
                            validator: validate_invoice_code,
                            trigger: 'blur'
                        }],
                        invoice_number: [{
                            required: true,
                            // message: '请填写发票代码',
                            validator: validate_invoice_number,
                            trigger: 'blur'
                        }],
                    },

 save_data(formName) { // 编辑保存
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            var that = this;
                            this.zhikongtemp.file = this.fileList;
                            axios.post('saveData', this.zhikongtemp)
                                .then(function(response) {
                                    if (response.data.code != 0) {
                                        that.$message.error(response.data.message);
                                    } else {
                                        that.zhikongUpdate_dialog = false;
                                        that.$message.success(response.data.message);
                                        that.getList()
                                    }
                                })
                                .catch(function(error) {});
                        }
                    })
                },