ElementUI - 表单的验证

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013379717/article/details/81916108

1、验证说明

    ElementUI 的 Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并在 Form-Item 的 prop 属性设置为需校验的字段名即可

2、表单示例

<el-form :rules="rules" ref="dataForm" :model="dataForm">

    <el-form-item label="用户名" prop="userName">
        <el-input v-model="userName"></el-input>
    </el-form-item>
    
    <el-form-item label="创建时间" prop="createTime">
        <el-date-picker v-model="dataForm.createTime" type="datetime" placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
    </el-form-item>   
    
    <el-form-item label="用户标签" prop="labels">
        <el-checkbox-group v-model="rdataForm.labels">
            <el-checkbox label="活跃" name="labels"></el-checkbox>
            <el-checkbox label="美食" name="labels"></el-checkbox>
            <el-checkbox label="萌新" name="labels"></el-checkbox>
            <el-checkbox label="次元" name="labels"></el-checkbox>
        </el-checkbox-group>
    </el-form-item>
    
    <el-form-item label="用户组" prop="group">
        <el-radio-group v-model="dataForm.group">
             <el-radio label="0">会员用户</el-radio>
             <el-radio label="1">普通用户</el-radio>
         </el-radio-group>
    </el-form-item>
    
    <el-form-item label="状态" prop="status">
        <el-select v-model="ruleForm.region" placeholder="请选择">
            <el-option label="启用" value="0"></el-option>
            <el-option label="禁用" value="1"></el-option>
        </el-select>
    </el-form-item>
    
    <el-form-item label="区域(级联菜单)" prop="provinceId">
        <el-select v-model="dataForm.provinceId" placeholder="省" @change="provinceChange">
            <el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item prop="cityId">
        <el-select v-model="dataForm.cityId" placeholder="市" @change="cityChange">
            <el-option v-for="item in cities" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item prop="areaId">
        <el-select v-model="dataForm.areaId" placeholder="区" @change="areaChange">
            <el-option v-for="item in areas" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
    </el-form-item>
    
</el-form>

3、验证示例

rules: {
	userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
	createTime: [{required: true, message: '请选择日期', trigger: 'change' }],
	labels: [{ required: true, message: '请至少选择一个标签', trigger: 'change' }],
	group: [{ required: true, message: '请选择用户组', trigger: 'change' }],
	status: [{ required: true, message: '请选择状态', trigger: 'change'}],
	provinceId: [{ required: true, message: '请选择省份', trigger: 'change' }],
	cityId: [{ required: true, message: '请选择城市', trigger: 'change' }],
	areaId: [{ required: true, message: '请选择区县', trigger: 'change' }]
}

4、官网地址

    https://element-cn.eleme.io/#/zh-CN/component/form