当前位置：网站首页>Form组件常用校验规则-1（持续更新中~）

Form组件常用校验规则-1（持续更新中~）

2022-07-04 18:45:00 【51CTO】

Form组件常用校验规则-1（持续更新中~）_Form表单校验

前言

最近感触越来越深，就是要经常分享，分享自己遇到的坑，分享自己的解决办法，分享自己的各种经验，这非常有必要。因为，我遇到问题第一反应是先看看别人是怎么解决的，肯定有人也有相同的想法，那这个时候就需要大家都非常慷慨地分享。所以，以后我会尽量定期进行总结分享，与人方便与己方便~

参考链接

https://element.eleme.io/#/zh-CN/component/form

https://github.com/yiminghe/async-validator

表单校验简介

使用目的

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。

简单使用

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

       
       <
       
       el
       
       -
       
       form :
       
       model
       
       =
       
       "ruleForm" :
       
       rules
       
       =
       
       "rules" 
       
       ref
       
       =
       
       "ruleForm" 
       
       label
       
       -
       
       width
       
       =
       
       "100px" 
       
       class
       
       =
       
       "demo-ruleForm"
       
       >
       
       <
       
       el
       
       -
       
       form
       
       -
       
       item 
       
       label
       
       =
       
       "活动名称" 
       
       prop
       
       =
       
       "name"
       
       >
       
       <
       
       el
       
       -
       
       input 
       
       v
       
       -
       
       model
       
       =
       
       "ruleForm.name"
       
       >
       
       <
       
       /el-input>
       
       <
       
       /el-form-item>
       
       <
       
       el
       
       -
       
       form
       
       -
       
       item
       
       >
       
       <
       
       el
       
       -
       
       button 
       
       type
       
       =
       
       "primary" 
       
       @
       
       click
       
       =
       
       "submitForm('ruleForm')"
       
       >
       
       立即创建
       
       <
       
       /el-button>
       
       <
       
       el
       
       -
       
       button 
       
       @
       
       click
       
       =
       
       "resetForm('ruleForm')"
       
       >
       
       重置
       
       <
       
       /el-button>
       
       <
       
       /el-form-item>
       
       <
       
       /el-form>
       
       <
       
       script
       
       >
       
       export 
       
       default {
       
       data() {
       
       return {
       
       ruleForm: {
       
       name: 
       
       '',
       
        },
       
       rules: {
       
       name: [
       
            { 
       
       required: 
       
       true, 
       
       message: 
       
       '请输入活动名称', 
       
       trigger: 
       
       'blur' },
       
            { 
       
       min: 
       
       3, 
       
       max: 
       
       5, 
       
       message: 
       
       '长度在 3 到 5 个字符', 
       
       trigger: 
       
       'blur' }
       
          ],
       
        }
       
      };
       
    },
       
       methods: {
       
       submitForm(
       
       formName) {
       
       this.
       
       $refs[
       
       formName].
       
       validate((
       
       valid) 
       
       => {
       
       if (
       
       valid) {
       
       alert(
       
       'submit!');
       
          } 
       
       else {
       
       console.
       
       log(
       
       'error submit!!');
       
       return 
       
       false;
       
          }
       
        });
       
      },
       
       resetForm(
       
       formName) {
       
       this.
       
       $refs[
       
       formName].
       
       resetFields();
       
      }
       
    }
       
  }
       
       <
       
       /script>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.