vue.js+element-ui之表单验证

最新推荐文章于 2025-12-04 08:29:53 发布

转载最新推荐文章于 2025-12-04 08:29:53 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lidongpeng/p/9680273.html

文章标签：

#ui #javascript #ViewUI

本文详细介绍如何在Element-UI中使用rules和prop属性进行表单数据验证，包括el-select和el-input组件的具体配置和触发规则，适用于前端开发人员。

　　在element-ui中表单两个控件，使用了rules和prop的方式进行表单数据的合理性验证：

　　el-select

　　el-input

<el-form :model="form" :rules="rules" ref="form" label-width="90px">
                        <el-form-item label="题号：" prop="subjectNo">
                            <el-input v-show="isAdd" v-model="form.subjectNo" placeholder="请输入题号"></el-input>
                            <span v-show="isEdit" v-cloak>{{form.subjectNo}}</span>
                        </el-form-item>
 <el-form-item label="题目：" prop="subjectName">
                            <el-input v-model="form.subjectName" placeholder="请输入题目" @change="changeName"></el-input>
                        </el-form-item>
                        <el-form-item label="答案：" prop="subjectAnswer">
                            <el-input type="textarea" v-model="form.subjectAnswer" placeholder="请输入试题的所有答案，如：A xxx B xxx C xxx D xxx。注意ABCD推荐使用大写" @change="changeDesc">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialog = false" size="small" style="margin-right: 2px" v-text="button.cancel"></el-button>
                        <el-button type="primary" @click="submitForm('form')" size="small" v-text="button.confirm"></el-button>
                    </div>
                </el-dialog>

rules: {
                    subjectName: [
                        {required: true, message: '试题名字不能为空', trigger: 'change'},
                        {max: 200, message: '总字数不得超过200', trigger: 'blur'},
                        {validator: validateName, trigger: 'blur,change'}
                    ],
                    subjectNo: [
                        {required: true, message: '请填写试题编号', trigger: 'change'},
                        {max: 6, message: '试题编号不能超过6位', trigger: 'blur'},
                        {validator: validateNo, trigger: 'blur,change'}
                    ],
                    subjectAnswer: [
                        {required: true, message: '请填写试题答案，答案不能为空', trigger: 'change'},
                        {max: 300, message: '总字数不能超过300', trigger: 'blur'}
                    ],
                }