账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    关于element v-for 循环子组件表单的验证问题
    27
    0
    子组件:
    
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="ruleForm.age"></el-input>
          </el-form-item>
        </el-form>
        
        <script>
          export default {
            props: {
                propsRuleForm: Object
            },
            data() {
              var checkAge = (rule, value, callback) => {
                if (!value) {
                  return callback(new Error('年龄不能为空'));
                }
                setTimeout(() => {
                  if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                  } else {
                    if (value < 18) {
                      callback(new Error('必须年满18岁'));
                    } else {
                      callback();
                    }
                  }
                }, 1000);
              };
              var validatePass = (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('请输入密码'));
                } else {
                  if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                  }
                  callback();
                }
              };
              var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                  callback(new Error('两次输入密码不一致!'));
                } else {
                  callback();
                }
              };
              return {
                ruleForm: this.propsRuleForm,
                rules: {
                  pass: [
                    { validator: validatePass, trigger: 'blur' }
                  ],
                  checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                  ],
                  age: [
                    { validator: checkAge, trigger: 'blur' }
                  ]
                }
              };
            },
            methods: {
              submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                  if (valid) {
                    alert('submit!');
                  } else {
                    console.log('error submit!!');
                    return false;
                  }
                });
              },
              resetForm(formName) {
                this.$refs[formName].resetFields();
              }
            }
          }
        </script>
        
        
        

    父组件:

    <template>
        <el-button @click="submit">提交</el-buttom>
        <div v-for="(item, index) in List" :key="index">
            <子组件 @propsRuleForm="item" />
        </div>
    </template>
    <script>
        import 子组件 form './子组件.vue'
         export default {
             data () {
                 List: [
                    { pass: '', checkPass: '', age: '1' },
                    { pass: '', checkPass: '', age: '2'}
                 ]
             },
             methods: {
                 submit () {
                     // 求校验所有form的方法,如果通过执行下一步,如果不通过提示哪个form验证不通过
                 }
             }
         }
    </script>
    

    求校验所有form的方法,如果通过执行下一步,如果不通过提示哪个form验证不通过

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部