①设置el-form-item的prop值 与formdata中定义的key保持一致` ②如果rules需要通过el-form统一设置,rules的key定义也与prop保持一致(如果不一致,需要在 el-form-item 中 手动指定) ③复杂的校验函数可通过validator单独定义 <el-form class="demo-form":model="form":rules="rules" > <el-form-item label="...
</el-form-item> <el-form-item> <!-- 提交的时候传入的是表单的ref --> <el-button type="primary" @click="submitForm('registerRef')">立即创建</el-button> <el-button @click="resetForm('registerRef')">重置</el-button> </el-form-item> </el-form> </div> </div> </template> <...
而最关键的一点是el-form-item标签中的prop属性,属性值必须与绑定的字段名称保持一致。 rules字段用来定义各个字段具体的校验规则,用法请查阅开篇的demo示例,其中required标识字段是否必填,message为校验提示语,trigger为单个校验触发方式;也可以通过validator字段自定义校验规则,方法validateProductName中对商品名称做了判空及...
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" ...
1. 表单中的部分el-form-item 的label都是从接口拿到的,需要遍历进行动态渲染。 2. 需要给每个el-form-item加上校验至少是必填校验 2. 需要给每个el-form-item加上校验至少是必填校验 3. 有的el-form-item不需要校验,也不是从接口获取得 2、查阅相关文档([element官网](https://element.eleme.cn/#/zh-...
</el-form-item> </div> </el-form> ``` 2. data结构如下:rules为个表单项的验证规则 ``` data() { return { resumes: { List: [{ startDate: '', endDate: '', phone: '' }] }, rules: { // 添加校验 startDate: [{ required: true, ...
<el-form style="margin-top:40px" :model="loginForm" > rules规则先定义空规则,后续再详解 loginRules:{}<el-formstyle="margin-top: 50px"model="loginForm":rules="loginRules"> 设置prop属性 校验谁写谁的字段 <el-form-itemprop="mobile">...<el-form-itemprop="password">... ...
submitForm (formName) { this.$refs[formName].validate((valid) => { if (!valid) return console.log('未通过校验') }) }, addItem () { this.form.activities.push({ name: '', content: '' }) }, removeItem (index) { this.form.activities.splice(index, 1) ...
</el-form-item> </el-form> 这种方式需要在data()中写入rule{},对于需要校验字段prop中的如visitorName写上验证规则,如下: data() { return { formData: { visitorName: '', cardType: 1, cardCode: '' }, rule: { visitorName: [ { required: true, message: '请输入姓名', trigger: 'blur' ...
/直接在表单上进行验证 <el-form-item label="跳过行数" prop="ignoreLines" :rules="[{ required: true, validator: checkNumber, trigger: 'blur' }]"> //方法定义在methods中 checkNumber(rule, value, callback){ if (!value) { return callback(new Error('请输入跳过行数')); } else if (!/...