element-ui 表单校验

38kcok9w2vHanx_

已于 2024-06-24 15:12:12 修改

阅读量113

点赞数 2

文章标签： ui vue.js elementui

于 2024-03-20 18:30:27 首次发布

本文链接：https://blog.csdn.net/Hanx_/article/details/136884275

版权

本文详细介绍了在Vue应用中使用ElementUI的El-Cascader级联选择器和El-Select选择器，以及如何实现表单字段的验证，包括必填项和手机号格式检查。

摘要由CSDN通过智能技术生成

<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="myRuleForm">
            <el-form-item
                label="名字"
                prop="name"
            >
                <el-input
                    v-model="ruleForm.name"
                    placeholder="请输入名字"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="手机"
                prop="phone"
            >
                <el-input
                v-model="ruleForm.phone"
                placeholder="请输入手机"
                ></el-input>
            </el-form-item>
            <!-- 级联选择器 -->
            <el-form-item label="类型" prop="type">
                <el-cascader
                v-model="ruleForm.type"
                :options="typeData"
                :props="{
                    value: 'mycode',
                    label: 'myname',
                }"
                style="width: 100%"
                ></el-cascader>
            </el-form-item>
            <!-- 选择器 -->
            <el-form-item label="类型2" prop="type2">
                <el-select v-model="ruleForm.type2" placeholder="请选择类型">
                    <el-option v-for="(item,index) in typeData" :label="item.myname" :value="item.mycode" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="日期" prop="date">
                <el-date-picker
                    v-model="ruleForm.date"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-button @click="submitForm('myRuleForm')">提交</el-button>
            <el-button @click="clearForm('myRuleForm')">清空</el-button>
        </el-form>
    </div>
</template>
<script>
export default {
    data () {
        var checkPhone = (rule, value, callback) => { // 手机号验证
            if (!value) {
                return callback(new Error('手机号不能为空'));
            } else {
                const reg = /^1\d{10}$/
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error('请输入正确的手机号'));
                }
            }
        }
        return {
            ruleForm: {
                name: '',
                type: '',
                type2: '',
                phone: '',
                date: ''
            },
            rules: {
                name: [
                    { required: true, message: "请输入名字", trigger: "blur"}
                ],
                type: [
                    { required: true, message: "请选择类型", trigger: "change" },
                ],
                type2: [
                    { required: true, message: "请选择类型2", trigger: "change" },
                ],
                phone: [
                    { required: true, message: "请输入电话", trigger: "blur" },
                    { validator: checkPhone, trigger: 'blur' },
                    // 或者直接用下面的写法：
                    { pattern: /^1\d{10}$/,message: "请输入正确的手机号码", trigger: "blur"}
                ],
                date: [
                    { required: true, message: "请选择日期", trigger: "change" },
                ],
                idCard: [ // 身份证校验
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                    { pattern: /^(\d{18,18}|\d{15,15}|\d{17,17}X)$/, message: '请填写正确的身份证号码', trigger: "blur"}
                ],
            },
            typeData: [
                {
                    myname: '第1个选项', mycode: '1'
                },
                {
                    myname: '第2个选项', mycode: '2'
                },
                {
                    myname: '第3个选项', mycode: '3'
                },
            ]
        }
    },
    methods: {
        submitForm(form){
            console.log(this.ruleForm.type);
            this.$refs[form].validate((valid)=>{
                if(valid){
                    console.log('可以提交');
                }else{
                    console.log('no no no');
                }
            })
        },
        clearForm(form){
            this.$refs[form].resetFields();
            this.ruleForm.type = '' // 重置后再提交，级联的校验失效了，打印出来type是['', __ob__: Observer]，所以给它清空下值
        }
    }
};
</script>

<style scoped='scoped' lang='scss'>

</style>