element-UI表单验证

转载自：

一、简单逻辑验证（直接使用rules）

实现思路

•html中给el-form增加 :rules="rules"
•html中在el-form-item 中增加属性 prop="名称"

•js中直接在data中定义rules:{}

<el-form ref="form" :rules="rules" :model="form" label-width="300px">
  <el-form-item label="文案" prop="doc">
    <el-input v-model="form.doc" placeholder="字数限制15字以内"></el-input>
  </el-form-item>
</el-form>

<script>
export default {
 data() {
  return {
   form: {
     doc: '',
   },
   // 校验规则
   rules: {
    doc: [
          {required: true, message: '必填', trigger: 'blur'}
        ]
   }
  }
 }
}
</script>

二、自定义验证逻辑

实现思路

•html中给el-form增加 :rules="rules"
•html中在el-form-item 中增加属性 prop="名称"
•js中直接在data中在rules中的名称对应中设置 validator: 验证器名称,

•js中在data中 return之上书写验证器对应的js验证逻辑

（prop可以只绑定第一个input的，第二个input写上ref属性，验证的rules中写一个方法，这个方法验证第一个input框的同时，通过 this.$refs.xxx.value的形式获取第二个input框值，只要这两个input框中存在有问题的情况则直接返回new Error()）.

<el-form-item prop="over">
    <el-input v-model.number="form.over"><span slot="prefix">满</span></el-input>
    <el-input v-model.number="form.minus" ref="minus"><span slot="prefix">减</span></el-input>
</el-form-item>

  data () {
    var overMinus = (rule, value, callback) => {
      let minus = Number(this.$refs.minus.value)
      // console.log(minus)
      if (!value || !minus) {
        callback(new Error('必填 请输入数字(不能为0)'))
      }
      setTimeout(() => {
        if (isNaN(value) === true || isNaN(minus) === true) {
          callback(new Error('请输入数字(不能为0)'))
        } else if (minus >= value) {
          callback(new Error('金额不能高于使用门槛'))
        } else {
          // 最后这个callback()一定要有，否则提交时不能validate
          callback()
        }
      }, 100)
    }
    return {
　　　　form:{
      ......     }
      ......
      rules: {
        over: [
          {required: true, validator: overMinus, trigger: 'change'}
        ]
      }
    }
  }

三、表单提交

实现思路

•html中给el-form增加 ref="form" :model="ruleForm"
•html中给提交按钮增加点击事件 @click="submitForm('ruleForm')" （）中对应的为form的:model="ruleForm"
•js中直接在methods中定义提交事件 submitForm(){}

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" >
//表单项
 <el-form-item label="发货人电话" prop="phone">
     <el-input class="inp" v-model="form.phone" auto-complete="true"></el-input>
 </el-form-item>、
 ...
 //提交按钮
 <el-button class="btn-login" type="primary" size="medium" @click="submitForm('ruleForm')">立即登录</el-button>       
</el-form>

submit (formName) {
      // 表单整体验证
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          console.log('error submit!!')
          return false
        } else {
          this.form['result'] = this.result
          console.log(this.form)
          // this.$emit('on-close')
        }
      })
    }

element-UI表单验证

相关推荐