vue element-ui 通过v-for渲染的el-form-item组件，使用自带的表单验证

HTML：

<el-form ref="newTermDetail" :model="newTermDetail" class="auto_form">
            <div :style="operation =='new' ? 'margin-left: 50px' : 'margin-left: 20px'">
                <el-form-item 
                    v-for="(domain, index) in newTermDetail.questions"
                    :label="operation == 'new' ? ' ' : '' + domain.id"
                    :key="'term' + index"
                    :prop="'questions.' + index + '.s_question'"
                    :style="index == 0 ? 'margin-top: 0; margin-bottom: 20px;' : 'margin: 20px auto;'"
                    :rules="[{ required: true, validator: checkInputValid, message: '请输入中英文', trigger: ['blur','change'] }]">
                    <el-input style="width: 300px;" type="textarea" autosize v-model="domain.s_question"></el-input>
                    <el-button @click.prevent="removeTermDomain(domain, index)">删除</el-button>
                </el-form-item>
            </div>
    </el-form>

js data：

  data() {
    let checkInput = (rules, value, callback) => {
      const regex = new RegExp("^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z ]|[，、？。!,?.！])+$");
      if(!regex.test(value) || !value) {
        callback(new Error('请输入中英文语句'));
      }else {
        callback();
      }
　　}
    return {
        checkInputValid: checkInput,
        newTermDetail: {
            questions: [
            { s_question: ''}, 
            { s_question: ''}
            ]
        }
    };
  },

 

推荐网址：https://blog.csdn.net/uncle_long/article/details/80257389

转载于:https://www.cnblogs.com/zhaomeizi/p/9909822.html