vue表单验证

如果你是单独建的js文件 先引入正则表达式文件才进行下一步 或者直接在组件内写正则。
prop绑定的值要与v-model绑定的值相同
<template>
    <div>
        <button @click="report"></button>
        <el-dialog title="添加" :visible.sync="roleFormVisible"  :rules="rules">
            <el-form :model="inform"  :label-position="labelPosition" label-width="80px"  :rules="rules" ref="ruleForm">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="举报类型:" prop="type">
                            <el-select
                                    v-model="inform.type"
                                    placeholder="请选择">
                                <el-option
                                        v-for="item in types"
                                        :key="item.id"
                                        :label="item.typeName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话:" prop="phone">
                            <el-input v-model="inform.phone" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="举报人:" prop="whistleblower">
                            <el-input v-model="inform.whistleblower" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="举报内容:">
                    <el-input type="textarea" :autosize="{ minRows: 10}" placeholder="请输入内容" v-model="report_content">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="roleFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">举 报</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'tx',
        data() {

            //判断表单输入的值是否合法
            var whistleblower = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('举报人不能为空'));
                }else {
                    callback();
                }
            };
            var type = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择举报类型'));
                }else {
                    callback();
                }
            };
            var phone = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入联系电话'));
                }else {
                    callback();
                }
            };
            return {
                roleFormVisible:false,
                labelPosition:'right',
                report_content:'',

                //表单绑定的值
                inform:{
                    type:'',
                    phone:'',
                    whistleblower:'',
                },
                types:[{
                    id:"0",
                    typeName:"食品生产",
                },{
                    id:"1",
                    typeName:"餐饮服务",
                },{
                    id:"2",
                    typeName:"药品生产",
                },{
                    id:"3",
                    typeName:"药品经营",
                }],

                //验证条件
                rules: {
                    type: [
                        { validator: type, trigger: 'blur' }
                    ],
                    phone: [
                        { validator: phone, trigger: 'blur' }
                    ],
                    whistleblower: [
                        { validator: whistleblower, trigger: 'blur' }
                    ]
                },
            }
        },
        methods: {

            //提交表单时验证
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 调用方法
                        this.informs();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            report:function () {    
                this.roleFormVisible=true;
            },

            //当表单验证通过时的操作
            informs:function () {
                console.log(this.inform)
                console.log(this.report_content)
                this.$axios.post(this.$api.inform.inform,{
                    "phone":this.inform.phone,
                    "whistleblower":this.inform.whistleblower,
                    "type":this.inform.type,
                    "reportContent":this.report_content
                }).then((res)=>{
                        let result=res.data;
                        console.log(result)
                        if(result.code==200){
                            this.roleFormVisible=false;
                            this.$alert(result.msg);
                        }
                    }).catch((err)=>{
                    console.log(err)
                    this.$message.error('请求出错')
                })
            }
        }
    }
</script>

<style>
    .el-col{
        padding: 0;
        margin: 0;
    }
</style>

内置校验规则
vue-validator 内置一些常用的验证规则：

• required — 输入值不能为空
• pattern — 必须匹配pattern表示的正则表达式
• minlength — 输入值长度不能小于minlength表示的值
• maxlength — 输入的值不能大于maxlength表示的值
• min — 输入值不能小于min表示的值
• max — 输入值不能大于max表示的值

与v-model同时使用
vue-validator会自动校验通过v-model动态设置的值。

芜湖芜湖

啦啦啦啦啦啦

略略略