iview/view-design+vue2实现表单校验

1.iview/view-design介绍

iview是一款基于Vue.js的开源UI组件库，提供了丰富的组件和样式，支持响应式布局和多语言环境。它使用了最新的前端技术，如ES6、Webpack和SASS，让开发者可以快速构建高质量的Web应用程序。

View-design是一款基于Vue.js的开源UI组件库，它的设计理念是简单、易用、美观。它提供了众多的组件，如按钮、表单、弹窗、表格等，并且还支持多种主题和组件扩展，开发者可以根据自己的需求进行定制。

 俩者之间主要的区别是vue的版本不同，这里以vue2为例实现代码

2.安装以及配置

2.1创建初始化项目

首先使用vue脚手架创建一个新的项目

确保电脑已通过npm安装vue脚手架

若没有安装可通过npm快算安装到电脑

npm p @vue/cli -g

vue create project

基础项目搭建完成后开始配置项目

 2.2 下载view-design

 进入项目目录执行命令

npm i view-design --save

 --save表示放到生产环境依赖中，默认可不写

 查看package.json可已看到多出来一个依赖

 2.3vue引入并配置全局生效

在main.js中引入这几个文件

import iView from 'view-design'
import 'view-design/dist/styles/iview.css'

Vue.use(iView)

 最后在组件中引入即可使用

3Form表单配置和校验规则

3.1表单的基本结构

     <Form ref="form" :model="form" :rules="formRule" label-width="100">
          <FormItem label="用户名" prop="username">
            <Input v-model="form.username" placeholder="请输入用户名" clearable />
          </FormItem>
          <FormItem label="密码" prop="password">
            <Input type="password" v-model="form.password" placeholder="请输入密码" :password="true" />
          </FormItem>
          <FormItem label="生日" prop="birthday">
            <DatePicker v-model="form.birthday" aria-placeholder="生日"></DatePicker>
          </FormItem>
          <FormItem label="年龄" prop="age">
            <Input type="number" v-model="form.age" placeholder="请输入年龄" />
          </FormItem>
          <FormItem label="性别" prop="sex">
            <Select v-model="form.sex">
              <Option :value="0">女</Option>
              <Option :value="1">男</Option>
            </Select>
          </FormItem>
        </Form>
        <Row type="flex" justify="end">
          <Col :span="10">
          <Button @click="reset">重置</Button>
          <Button @click="submit" type="primary">确定</Button>
          </Col>
        </Row>

 3.2表单校验规则

3.2.1 默认表单校验规则

  username: [{ required: true, message: "用户名不能为空", trigger: 'blur' }],
        password: [{ required: true, message: "密码不能为空", trigger: 'blur' }, {
          min: 6,
          max: 12,
          message: "长度在6-12之间"
        }],

 required: true 表示该字段必填 通常只能校验一般字符串，数字，不包括数组等

message: "用户名不能为空"  表示该字段校验不通过的提示信息

trigger: 'blur' 表示该字段的触发方式是失去焦点

 3.2.2 自定义表单校验规则

  birthday: [{
          required: false,
          validator: (rule, value, callback) => {
            let today = new Date()
            if (value > today) {
              callback(new Error("出生年份不能比今天晚"))
            } else {
              callback()
            }
          }
        }]

validator:(rule,value,callback)=>{}

如果校验通过则直接调用回调函数，不通过则返回一个错误对象

3.2.3 多表单校验规则

表单校验规则支持多个校验方式，本身是一个数组，可放多个校验规则

     password: [
          { required: true, message: "密码不能为空", trigger: 'blur' },
          {
            min: 6,
            max: 12,
            message: "长度在6-12之间"
          }],

 3.2.4 表单校验方法

resetFields() 重置表单并清理错误显示

validate((validate)=>{}) 校验表单

  /**
     * 重置表单
     */
    reset() {
      this.$refs.form.resetFields()
    },
    /**
     * 提交方法
     */
    submit() {
      this.$refs.form.validate(validate => {
        if (validate) {
          // todo: 调用表单接口 
        } else {
          this.$Message.warning("请填写完整表单")
        }
      })
    }

4案例代码

<template>
  <div id="app">
    <div>
      <Card justify="center" style="width: 400px;align: center;">
        <Form ref="form" :model="form" :rules="formRule" label-width="100">
          <FormItem label="用户名" prop="username">
            <Input v-model="form.username" placeholder="请输入用户名" clearable />
          </FormItem>
          <FormItem label="密码" prop="password">
            <Input type="password" v-model="form.password" placeholder="请输入密码" :password="true" />
          </FormItem>
          <FormItem label="生日" prop="birthday">
            <DatePicker v-model="form.birthday" aria-placeholder="生日"></DatePicker>
          </FormItem>
          <FormItem label="年龄" prop="age">
            <Input type="number" v-model="form.age" placeholder="请输入年龄" />
          </FormItem>
          <FormItem label="性别" prop="sex">
            <Select v-model="form.sex">
              <Option :value="0">女</Option>
              <Option :value="1">男</Option>
            </Select>
          </FormItem>
        </Form>
        <Row type="flex" justify="end">
          <Col :span="10">
          <Button @click="reset">重置</Button>
          <Button @click="submit" type="primary">确定</Button>
          </Col>
        </Row>
      </Card>
    </div>
  </div>
</template>

<script>
import { Card, DatePicker, FormItem, Input, Option, Select } from 'view-design';

export default {
  name: 'App',
  components: {
    Card,
    FormItem,
    Input,
    DatePicker,
    Select,
    Option
  },
  data() {
    return {
      form: {
        username: "",
        password: "",
        birthday: "",
        sex: 0,
        age: 0
      },
      formRule: {
        username: [{ required: true, message: "用户名不能为空", trigger: 'blur' }],
        password: [
          { required: true, message: "密码不能为空", trigger: 'blur' },
          {
            min: 6,
            max: 12,
            message: "长度在6-12之间"
          }],
        birthday: [{
          required: false,
          validator: (rule, value, callback) => {
            let today = new Date()
            if (value > today) {
              callback(new Error("出生年份不能比今天晚"))
            } else {
              callback()
            }
          }
        }]
      },

    }
  },
  methods: {
    /**
     * 重置表单
     */
    reset() {
      this.$refs.form.resetFields()
    },
    /**
     * 提交方法
     */
    submit() {
      this.$refs.form.validate(validate => {
        if (validate) {
          // todo: 调用表单接口 
        } else {
          this.$Message.warning("请填写完整表单")
        }
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  align-items: center;
}
</style>