提交表单类需求的完成步骤

第一步：引入element-ui库，在对应的组件中使用，这一步不用多说。

第二步：配置要用到的表单验证规则，用:rules绑定即可，右边的函数名对应在data中书写的名字，并且给需要验证的那一项（el-form-item）写上对应的字段名，比如这里要校验age字段，就是prop="age"。上代码：

    
      
    
    
        //绑定点击事件，方法中传入的是对应的表单名字（就是第一行ref="form"等式右边的）
        重置
        确认
    
  

在data中：

rules: {
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' }
        ],
}

第三步：书写表单提交时的校验以及重置功能：

用到了element-ui的MessageBox d窗组件，用于美化系统自带的alert等d窗样式

  methods: {
    // 重置功能
    cancel(formName) {
      //提示d窗样式修改
      this.$confirm('是否重置表单', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        iconClass: 'icon-tips',
        customClass: 'devOps-message',
        center: true,
      })
        //点击d窗的确认按键的回调，重置表单
        .then(() => {
          this.$refs[formName].resetFields();
        })
        //点击d窗的取消按键的回调
        .catch(() => {});
    },
    // 提交功能
    confirm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //将data中的表单存起来，这一步可以省略，携带数据时直接写this.form即可
          const form = this.form;
            //getData是一个在api.js文件中封装好的请求方法
            getData(form).then(data => {
            //由于这里只是提交表单，并不需要返回数据进行其他 *** 作，因此返回成功后d出成功即可
            if (data.status === 200) {
              this.$message({
                message: data.msg,
                type: 'success'
              });
            }
          });
        } else {
          return false;
        }
      });
    }
  }

这里需要注意的是，第二步的代码中绑定给按钮的cancel和confirm方法中传入的表单名（即'form'）一定要和ref="form"这句代码中右边的名字对应上，这是你写表单验证的根据，写错了就无法对应上表单。

重置很简单，直接调用resetFilds（）方法即可。提交表单时注意书写格式this.$refs[formName].validate(valid => {})，这里的validate是对表单进行校验的方法，参数为一个回调函数，是否检验成功和未通过校验的字段，因此传入参数valid，在方法内判断if（valid），即校验成功后进行if判断语句内的 *** 作，提交表单给后端。至此，基本功能完成。

其他一些比较重要的功能实现：

①让用户只能在input框中输入数字：

书写输入框的oninput属性即可：οninput="value=value.replace(/[^\d.]/g,'')"。replace中的校验字段看情况书写，比如这里是将除数字外的字段（字母，汉字等）都替换为空，实现让用户无法输入除数字外的其他字段的效果。

②需要自定义一些校验规则：

首先，需要创建一个js文件，在里面书写校验规则，然后暴露定义的方法：（calllback一定要写）

// 校验规则
const ruleNumber = (rule, value, callback) => {
  if (value < 0.1 || value === '') {
    callback(new Error('取值必须大于0'));
  } else {
    callback();
  }
};

export { ruleNumber };

然后在需要使用的组件里面用解构赋值的方式引入该方法并在之前定义的校验规则rules中使用即可：

import { ruleNumber } from 'plugins/util';

data(){
    return {
        rules: {
        age: [
           //validator后面写的就是需要使用的校验方法
          { required: true, type: 'Number', validator: ruleNumber }
        ],
        }
    }
}

这个方法我用的比较少，因为看到大佬写的项目里有，也记录一下吧。