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)
});

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

ElementUI提供了表单验证的规则，可以通过rules属性来定义对应el-form-item中的验证规则（支持多个规则验证）  

 由上所示，该表单有一个rules属性，其值为一个数组，里边每一项为一个对象，包含着每一条校验规则

trigger:'blur意为当表单失去焦点时开始校验

message为当校验失败时的提示信息 

当然，rules的值也可以是变量，在data中赋值也是可以的

 

二、ElementUI校验规则
 

ElementUI封装了组件el-form来收集、校验和提交数据，其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验，当不满足要求时会弹出message相应的提示信息。 

三、自定义规则调用

ElementUI提供的表单验证规则是有限的，可能无法满足我们项目的需求这时候就需要我们来自定义验证规则。我们在在data() {}中添加自定义的校验规则，然后在在data的return中通过validator引用校验规则。data() {return{}}中定义的rules要 中的 :rules 属性值相同，rules中的对象userName要与与 中的prop属性值相同。
 

四、自定义校验规则

validate是ElementUI封装用于对整个表单进行验证的，参数是一个回调函数。该回调函数在校验结束后被调用，是否校验成功和未通过校验的字段。这个回调函数的原型为：function fun(rule, value, callback, source, options){}，其中rule指向当前的规则对象，value是需要进行校验的值，callback是验证之后的执行回调，source是跟value的值一致的键值对象（可以忽略），options是个额外的配置选项（可选）。所以常见的函数定义如下，校验手机号码是否正确。

完整的代码可以参考一下如下：