element 中的表单校验如何快速实现

Element UI 中的表单校验可以通过在表单中使用 el-form 组件来实现。

1. 在表单中使用 el-form 组件来包裹所有需要验证的表单元素。
2. 在每个需要验证的表单元素上，使用 el-form-item 组件包裹，并在其中设置相应的属性和规则。
3. 设置验证规则，可以通过 props 或者 rules 两种方式来设置，在表单元素上设置 rules 属性可以针对该元素进行单独的验证。
4. 当提交表单时，调用 validate 方法即可触发表单验证。

<template>
  <el-form>
    <el-form-item label="用户名">
      <el-input> </el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" placeholder="请输入密码"> </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">提交</el-button>
    </el-form-item>
  </el-form>
</template>

表单校验三要素：

1、el-form 必须要有 rules 和 :model（表示当前表单绑定的数据） 两个属性

2、el-form-item 必须要有 prop 属性来指定校验规则

3、el-input 必须要使用 v-model 绑定数据

（正则校验 pattern）

<!-- 输入框 -->
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="用户名：" prop="username">
          <el-input
            placeholder="请输入用户名"
            v-model="form.username"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码：" prop="password">
          <el-input placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item class="tc">
          <el-button type="primary">登录</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
      

1. username 是 prop 指定的名字，一般 数据-prop-规则名 保持一致

2. required 必填项

3. essage 提示项

4. trigger 什么时机校验,可以写数组多要求，blur：失去焦点时校验，change: 跟随校验

在 <script> 中做表单校验时要按照 element-UI 提供的格式来写。

data () {
    return {
      form: {
        username: '',
        password: ''
      },
      // 表单校验规则
      rules: {
       
        username: [
          { required: true, message: '请输入用户名', trigger: ['blur' , 'change']},
          { min: 5, max: 11, message: '长度在 5 到 11 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 正则校验 pattern
          { pattern: /^\w{5,10}$/, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ]
      }

    }
  }

在所有校验都完成后，还需要在提交给服务器之前，进行一次兜底校验

校验整个表单是否通过校验，通过才能发请求，否则退出函数

ref 可以获取 dom 元素也可以获取组件对象

validate 是 el-form 组件提供的校验方法

methods: {
    login () {
      // 兜底校验
      this.$refs.form.validate(valid => {
        // 没有则返回
        if (!valid) return
        console.log('dldld')
      })
    },
    reset () {
      // 重置
      this.$refs.form.resetFields()
    }
  }

element-ui 还提供了自定义表单校验，在使用时要注意：

• rules 当前校验规则

• value 当前要校验的值

• 通过校验：callbdack()

• 未通过校验：callbdack(new Error('错误说明'))

        // 自定义校验
        isAgree: [
          // 自定义校验函数
          { validator: (rules, value, callbdack) => {

            if (value === true) {
              callbdack()
            } else {
            
            // 错误说明
              callbdack(new Error('请先同意'))
            }
          }, trigger: 'change' }
        ]