element Form组件封装

 
 
Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
典范表单
包罗各种表单项，比如输入框、选择器、开关、单选框、多选框等。
在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种范例的表单控件，包罗 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
扩展性极强的表单
 

• 编辑Form.vue文件
  

1.                                                     -                                                                                                  立即创建    取消  

复制代码

1.    data() {      return {        form: {          name: '',          region: '',          date1: '',          date2: '',          delivery: false,          type: [],          resource: '',          desc: ''        }      }    },    methods: {      onSubmit() {        console.log('submit!');      }    }

复制代码

 

• 设置路由
  
• 页面样式
  

TIPS

• 表单组件是由各个el-form-item组成
  
• el-form-item有许多种范例，输入框、下拉框等
  
• 属性主要有两个部分组成，数据绑定部分，通过model属性来绑定需要传给配景的那一串对象。form就是绑定的表单对象    model：表单数据对象
  
• el-form-item 由label和v-model,label就是表单形貌；表单的提交，v-model就是数据双向绑定通过输入框或下拉框输入选择更新到form上面，背面提交表单，直接把form对象传递给配景。
  

• 对它举行表单验证
  

element表单验证
在防止用户犯错的前提下，尽大概让用户更早地发现并改正错误
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

1. rules: {          name: [            { required: true, message: '请输入活动名称', trigger: 'blur' },            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }          ],          region: [            { required: true, message: '请选择活动区域', trigger: 'change' }          ],          date1: [            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }          ],          date2: [            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }          ],          type: [            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }          ],          resource: [            { required: true, message: '请选择活动资源', trigger: 'change' }          ],          desc: [            { required: true, message: '请填写活动形式', trigger: 'blur' }          ]        }      };    }

复制代码

 
自定义校验规则

这个例子中展示了如何使用自定义验证规则来完成暗码的二次验证。

1.    data() {      //定义一个函数，每次渲染data部分先执行这个函数，来校验规则      var checkAge = (rule, value, callback) => {         if (!value) {          return callback(new Error(&#39;年岁不能为空&#39;));        }        setTimeout(() => {          if (!Number.isInteger(value)) {            callback(new Error(&#39;请输入数字值&#39;));          } else {            if (value < 18) {              callback(new Error(&#39;必须年满18岁&#39;));            } else {              callback();            }          }        }, 1000);      };       //如果validatePass，通过之后启动一个回调函数      var validatePass = (rule, value, callback) => {//规则，校验值，校验通过之后回调函数        if (value === &#39;&#39;) {          callback(new Error(&#39;请输入暗码&#39;));        } else {          if (this.ruleForm.checkPass !== &#39;&#39;) {            this.$refs.ruleForm.validateField(&#39;checkPass&#39;);          }          callback();        }      };      var validatePass2 = (rule, value, callback) => {        if (value === &#39;&#39;) {          callback(new Error(&#39;请再次输入暗码&#39;));        } else if (value !== this.ruleForm.pass) {          callback(new Error(&#39;两次输入暗码不一致!&#39;));        } else {          callback();        }      };      return {        ruleForm: {          pass: &#39;&#39;,          checkPass: &#39;&#39;,          age: &#39;&#39;        },        rules: {          pass: [            { validator: validatePass, trigger: &#39;blur&#39; }          ],          checkPass: [            { validator: validatePass2, trigger: &#39;blur&#39; }          ],          age: [            { validator: checkAge, trigger: &#39;blur&#39; }          ]        }      };    },    methods: {      submitForm(formName) {        this.$refs[formName].validate((valid) => {          if (valid) {            alert(&#39;submit!&#39;);          } else {            console.log(&#39;error submit!!&#39;);            return false;          }        });      },      resetForm(formName) {        this.$refs[formName].resetFields();      }    }

复制代码

 

• 思路：如何举行表单组件封装？
  

• 把它设计成一个对象数组；
  
• 数据绑定部分是form,校验规则rules和label欠好显示在form上面；
  
• 定义一个对象，存放封装组件使用到的一些属性；
  
• 表单范例有许多种，需要通过v-if判断循环的范例；
  

• 封装好后完整代码如下
  

1.                                                                                     

复制代码

1.   data() {            return {                form: {                    name: &#39;&#39;,                    region: &#39;&#39;,                    date1: &#39;&#39;,                    date2: &#39;&#39;,                    delivery: false,                    type: [],                    resource: &#39;&#39;,                    desc: &#39;&#39;                },                formLabel: [                    {                        label: &#39;活动名称&#39;,                        key: &#39;name&#39;,                         type: &#39;input&#39;                    },                    {                        label: &#39;活动区域&#39;,                        key: &#39;region&#39;,                        type: &#39;select&#39;,                        options: [                            {                                label: "区域1",                                value: &#39;shanghai&#39;                            },                            {                                label: "区域2",                                value: &#39;beijing&#39;                            }                        ]                    },                    {                        label: &#39;活动时间&#39;,                        key: &#39;data1&#39;,                        type: &#39;date-picker&#39;                    }                ],            }        },        methods: {            onSubmit() {                console.log(&#39;submit!&#39;);            }        }

复制代码

来源：https://blog.csdn.net/jianjian_5201314/article/details/111917426
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！