Element的表单校验

牧云Flow
871 阅读2分钟

Element的表单校验

我们尝试通过一个案例对Element的表单校验进行一下补充

实现表单基本结构

创建项目

$ vue create login

选择babel / eslint

安装Element

开发时依赖 ： 开发环境所需要的依赖 -> devDependencies

运行时依赖: 项目上线依然需要的依赖 -> dependencies

$ npm i element-ui

在main.js中对ElementUI进行注册

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

接下来,利用Element组件完成如图的效果

image-20200906184428291

代码如下

<template>
  <div id="app">
    <!-- 卡片组件 -->
    <el-card class='login-card'>
      <!-- 登录表单 -->
      <el-form style="margin-top: 50px">
        <el-form-item>
          <el-input placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%">登录</el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
 #app {
   width: 100%;
   height: 100vh;
   background-color: pink;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .login-card {
   width: 440px;
   height: 300px;
 }
</style>

表单校验的先决条件

接下来，完成表单的校验规则如下几个先决条件

image-20200906184604982

model属性 (表单数据对象)

  data () {
    // 定义表单数据对象
    return {
      loginForm: {
        mobile: '',
        password: ''
      }
    }
  }

绑定model

 <el-form style="margin-top:40px" :model="loginForm" >

rules规则 先定义空规则，后续再详解

loginRules: {}
<el-form style="margin-top: 50px" :model="loginForm" :rules="loginRules">

设置prop属性

校验谁写谁的字段

<el-form-item prop="mobile">
   ...
<el-form-item prop="password">
   ...

给input绑定字段属性

<el-input v-model="loginForm.mobile"></el-input>
<el-input v-model="loginForm.password"></el-input>

表单校验规则

此时，先决条件已经完成，要完成表单的校验，需要编写规则

ElementUI的表单校验规则来自第三方校验规则参见 async-validator

我们介绍几个基本使用的规则

规则说明
required如果为true，表示该字段为必填
message当不满足设置的规则时的提示信息
pattern正则表达式，通过正则验证值
min当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值
max当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值
trigger校验的触发方式，change（值改变） / blur （失去焦点）两种，
validator如果配置型的校验规则不满足你的需求，你可以通过自定义函数来完成校验

校验规则的格式

{ key(字段名): value(校验规则) => [{}] }

根据以上的规则，针对当前表单完成如下要求

手机号 1.必填 2.手机号格式校验 3. 失去焦点校验

密码 1.必填 2.6-16位长度 3. 失去焦点校验

规则如下

loginRules: {
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "密码应为6-16位的长度",
            trigger: "blur",
          },
        ],
	}

自定义校验规则

自定义校验规则怎么用

validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))

var  func = function (rule, value, callback) {
    // 根据value进行进行校验 
    // 如果一切ok  
    // 直接执行callback
    callback() // 一切ok 请继续
    // 如果不ok 
    callback(new Error("错误信息"))
}

根据以上要求，增加手机号第三位必须是9的校验规则

如下

// 自定义校验函数
const checkMobile = function (rule, value, callback) {
    value.charAt(2) === '9' ? callback() : callback(new Error('第三位手机号必须是9'))
}

 mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }, {
            trigger: 'blur',
            validator: checkMobile
   }],

手动校验的实现

最后一个问题，如果我们直接点登陆按钮，没有离开焦点，那该怎么校验 ？

此时我们需要用到手动完整校验 案例

form表单提供了一份API方法，我们可以对表单进行完整和部分校验

方法名说明参数
validate对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promiseFunction(callback: Function(boolean, object))
validateField对部分表单字段进行校验的方法Function(props: array | string, callback: Function(errorMessage: string))
resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果—
clearValidate移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果Function(props: array | string)

这些方法是el-form的API，需要获取el-form的实例，才可以调用

采用ref进行调用

<el-form ref="loginForm" style="margin-top:40px" :model="loginForm" :rules="loginRules">

调用校验方法

login () {
    // 获取el-form的实例
    this.$refs.loginForm.validate(function (isOK) {
        if (isOK) {
            // 说明校验通过
            // 调用登录接口
        }
    }) // 校验整个表单
}
avatar
文章
阅读
粉丝