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

　　在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'}
                    ],
                }

 

 

注意tigger的使用规则，blur和change的适用范围