vue使用element实现表单验证

每次翻官网都太麻烦了，为了防止忘记，干脆就直接记下步骤

目录

一、前言

二、使用步骤

1、el-from

2、el-from-item

3、表单数据

4、rule的设置

4、验证结果（提交or确认按钮）

---

一、前言

1、首先看看官网是怎么说的：

---

        Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

---

2、思路

        原本打算按照：prop属性的设置-->rule验证规则-->验证结果的思路讲的，但是考虑到只是为了方便使用，所以就干脆把一个地方需要用到的东西都一起说了，再简单说说其作用即可。

二、使用步骤

1、el-from

<el-form 
:model="ruleForm" 
:rules="rules" 
ref="ruleForm" 
label-width="100px" 
class="demo-ruleForm">

（1） :model绑定的是表单元素的数据

（2）:relues绑定的是验证的规则

（3）ref是为了方便直接操作该表单，验证时候需要用到的

2、el-from-item

 <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>

  <el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>

（1） prop要与rule验证规则对应

（2）v-model是表单与数据的双向绑定

3、表单数据

 ruleForm: {
    name: '',
    type: [],
}

4、rule的设置

（1）基本结构

  rules: {
    name: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ]
}

        就是绑定的校验规则是一个对象，里面的属性对应的着表单项的prop，属性值是一个数组，也就是说，一个表单可以对应多个校验规则

（2）校验规则属性

• trigger表示何时会触发

属性值	含义
blur	失去焦点的时候触发
change	在输入框内容发生变化时触发
submit	在表单提交时触发

• require代表必填项
• min和max就是校验长度的啦
• type可以校验类型
• 数字校验：数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

（3）自定义校验规则

rules: {
    pass: [{ validator: validatePass, trigger: 'blur' }],
}

• 在data中定义validataPass规则

var validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'));
    } 
    else {
        if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
        }
          callback();
        }
};

• 这个规则中有三个参数，由验证框架自动调用并传递

参数	描述
rule	一个规则对象，描述了要验证的字段的规则
value	要验证的字段的当前值
callback	回调函数，您可以使用它来传递验证结果。如果验证通过，调用 callback() 即可，如果验证失败，调用 callback(new Error('错误信息')) 来触发错误

•  this.$refs.ruleForm.validateField('checkPass')

        使用 $refs 来获取表单的引用，然后调用 validateField 方法来触发确认密码字段的验证，通过手动调用 validateField 方法，实现实时的、基于交互的表单验证

4、验证结果（提交or确认按钮）

<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>

methods: {
  submitForm(formName) {
    this.$refs[formName].validate(valid => {
      if (valid) {
        alert('submit!')
      } 
    });
  },
  resetForm(formName) {
    this.$refs[formName].resetFields();
  }
}

         [formName] 在这里是一个占位符，表示在方法调用时传递不同的表单引用名称，以便处理多个不同的表单实例

        如果只处理一个表单的话，可以不用传el-from的ref，通过$refs.ruleFrom.validata((valid)=>{})也是可以实现的

---

 如果对你有帮助的话，请点个赞给博主一个小小的鼓励~