element ui form添加校验规则

javascript 复制代码
     <el-form :rules="rules" ref="ruleForm" label-position="top" :model="form" label-width="100px"
                class="basicform">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="手机号:" prop="name">
                            <el-input v-model="form.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="截止日期:">
                            <el-date-picker v-model="form.date" type="date" placeholder="请选择">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="负责人:" prop="person">
                            <el-select v-model="form.person" placeholder="请选择">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="描述:" class="namehuod">
                            <el-input type="textarea" v-model="form.ison"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>



            </el-form>
  <el-row :gutter="24" style="width: calc(100% - 0px);margin: 0 auto;">
                <el-col :span="24" style="border-top: 1px solid #ccc;padding: 10px 0;">
                    <el-button size="small" type="primary" @click="submitFnc()"
                        style="float: right;margin-right: 15px;">确认</el-button>
                    <el-button size="small" @click="resetForm" style="float: right;margin-right: 15px;">取消</el-button>
                </el-col>
            </el-row>
javascript 复制代码
  data() {
        return {
            form: {

            },
            rules: {
                name: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: this.isPhone, trigger: 'blur' }
                ],
                person: [
                    { required: true, message: '请选择负责人', trigger: 'change' }
                ]
            }

        };
    },
javascript 复制代码
 methods: {
        isPhone(rule, value, callback) {
            if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
                .test(value)) {
                return callback(new Error('请输入正确的手机号'));
            }
            callback();
        },
submitFnc() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                  console.log("校验通过")
                } else {

                    return false;
                }
            });

        },
 resetForm() {
//清除校验
            this.$refs.ruleForm.resetFields();
        },
}

添加校验规则有多中方法,其他方式可参考ele ui 官网

相关推荐
持久的棒棒君2 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
渔舟唱晚@3 小时前
大模型数据流处理实战:Vue+NDJSON的Markdown安全渲染架构
vue.js·大模型·数据流
crary,记忆4 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz4 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou05 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干5 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大5 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu5 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端6 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846956 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea