elementUI form表单使用validateField方法校验部分表单

<template>
<div id="app">
    <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-item>
    <el-button type="primary" v-loading="loading" @click="submitForm">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</div>
</template>
<script>
export default {
  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: {
          pass: '',
          checkPass: '',
          age: ''
        },
        loading: false,
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
  },
  methods: {
      submitForm() {
        const resArr = []
        this.$refs.ruleForm.validateField(['pass', 'checkPass'],(valid) => {
            resArr.push(valid)         
        })
        // 所有valid等於空字符串時通過校驗
        if (resArr.every(v => v === '')) {
            // 通過校驗後的操作
            this.loading = true
        }

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
}
</script>
<style lang="sass">
</style>
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要执行定制化校验,你可以使用 Element UI Form 组件提供的 `rules` 属性。该属性接收一个数组,数组中每个元素代表一个表单项的校验规则。 下面是一个示例代码,展示了如何通过 `rules` 属性实现表单项的定制化校验: ```html <template> <el-form :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" type="password"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { validator: this.checkUsername, trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度应为6-20位', trigger: 'blur' } ] } } }, methods: { checkUsername(rule, value, callback) { if (!/^[a-z0-9]+$/.test(value)) { callback(new Error('用户名只能包含小写字母和数字')) } else if (value.length < 4 || value.length > 16) { callback(new Error('用户名长度应为4-16位')) } else { callback() } } } } </script> ``` 在上面的代码中,我们在 `rules` 属性中定义了两个表单项的校验规则。其中,`username` 表单项的校验规则包括两个部分:第一个是必填校验,第二个是定制化校验,调用了 `checkUsername` 方法。`checkUsername` 方法接收三个参数:`rule` 表示当前校验规则对象,`value` 表示当前表单项的值,`callback` 是一个回调函数,用于返回校验结果。 在 `checkUsername` 方法中,我们对用户名的格式、长度进行了校验,并通过 `callback` 函数返回校验结果。 需要注意的是,定制化校验方法需要定义在组件的 `methods` 对象中。 以上就是 Element UI Form 组件的定制化校验的具体代码和方法,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值