elemeng-ui 中el-form 表单如何校验

目录

前言

         一、首先我们引入element

1、下载

2、引入

二、ElementUI校验规则

三、自定义规则调用

四、自定义校验规则

 

---

前言

表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。

一、首先我们引入element

1、下载

npm i element-ui -S

2、引入

我们这里直接完整引入了，按需引入请看element官网
在main.js中写入以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
  el: '#app',
  render: h => h(App)
});

如图，我们以一个要求输入年龄的表单举例 

<el-form-item
    label="年龄"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空', trigger: 'blur'},
      { type: 'number', message: '年龄必须为数字值', trigge