vue表单相关 表单校验

  <el-form label-width="100px" :rules="rules" :model="form" ref="form01">
            <el-form-item label="输入框" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入活动名称"
              >el-input>
            el-form-item>
            <el-form-item label="下拉框" prop="option">
              <el-select v-model="form.option" clearable >
                <el-option
                  v-for="item in formData.options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >el-option>
              el-select>
            el-form-item>
            <el-form-item label="时间" prop="time">
              <el-date-picker
                v-model="form.time"
                type="date"
                value-format="yyyy-MM-dd"
                :picker-options="formData.pickerOptions"
              >
              el-date-picker>
            el-form-item>
            <el-form-item label="开关">
              <el-switch v-model="form.switch"
              active-icon-class="el-icon-star-on"
              inactive-icon-class="el-icon-star-off">el-switch>
            el-form-item>
            <el-form-item label="多选">
                <el-checkbox-group v-model="form.checkbox">
                  <el-checkbox label="苹果">el-checkbox>
                  <el-checkbox label="香蕉">el-checkbox>
                  <el-checkbox label="栗子">el-checkbox>
                  <el-checkbox label="桃子">el-checkbox>
                el-checkbox-group>
            el-form-item>
            <el-form-item label="单选" prop="radio">
                <el-radio-group v-model="form.radio">
                  <el-radio label="苹果">el-radio>
                  <el-radio label="香蕉">el-radio>
                  <el-radio label="栗子">el-radio>
                  <el-radio label="桃子">el-radio>
                el-radio-group>
            el-form-item>
            <el-form-item label="多行输入" prop="textarea">
              <el-input type="textarea"
                v-model="form.textarea"
                placeholder="请输入活动名称"
              >el-input>
            el-form-item>
            <el-form-item label="上传">
                <el-upload action="https://jsonplaceholder.typicode.com/posts/">
                  <el-button type="primary">上传el-button>
                el-upload>
            el-form-item>
            <el-form-item label="评分">
                <el-rate v-model="form.score">el-rate>
            el-form-item>
          el-form>

  data() {
    return {
      form: {
        name: "",
        option: "",
        time: "",
        switch: false,
        checkbox: [],
        radio: "",
        textarea: "",
        upload: "",
        score: null,
      },
      formData: {
        options: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
        ],
        //设置日期禁用
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now(); //即下拉框时间大于当前时间的不可选
          },
        },
      },
      rules:{
          name:[{
              required:true,
              message:'请输入',
              trigger:'change'
          },
          {
              min:0,
              max:5,
              message:'只能输入0-5位',
              trigger:'change'
          }],
          option:{
              validator:this.checkName,
              trigger:'change'
          },
      }
    };
  },
  methods: {
      reset:function(formName){
          this.$refs[formName].resetFields();//重置表单
      },
      checkName:function(rule,value,callback){
          if(value===""){
              callback(new Error('请选择选项！'))
          }
          else if(value!="选项2"){
              callback(new Error('只能选择双皮奶！'))
          }
      }
  },

**

注意：

**
1、不能输入或者不能选择是因为没有进行数据绑定
2、下拉框：
el-select与el-option联合使用，el-select v-model的值为当前被选中的el-option的 value 属性值，el-option label绑定的值为下拉显示的值，若未绑定label则显示的为value的值
3、El-date-picker
①format属性指定输入框的格式（默认为yyyy-MM-dd，即"2021-03-02"）；使用value-format指定绑定值的格式(默认为"Thu Apr 07 2022 00:00:00 GMT+0800 (中国标准时间)")。
②使用picker-options属性可以为日期选择器设置特有选项，disabledDate属性可以设置日期禁用状态
4、switch：
注意，布尔值不能绑定给el-input ，可以设置开关两边的样式
5、多选框：
使用多选框组内设置n个多选框标签，多选框组和array绑定，多选框标签设置label属性，若选中则array中push一个label对应数据。 即：数组中数据的顺序和多选框标签写入的前后顺序无关，和选择的顺序有关。
6、单选：
使用单选框组内设置n个单选框标签，单选框组和string类型数据a绑定，若选中则a的数据为label对应数据。
7、重置表单
注意：也需要prop属性，否则重置不成功
this.$refs.form.resetFields(); //重置表单并清除校验
关于重置：
注意：在编辑表单与添加信息的表单复用时，会存在表单校验未清空的情况。例如，需求：编辑时表单内容为这一行的数据，添加时表单内容需为空的，如果先点击“编辑”，则表单内容的初始值不为空，在添加时为表单赋空值会触发change事件，会显示表单校验结果。如果直接在添加时增加表单重置方法，会有报错"resetFields is undefined"，因为表单还未加载好就调用这个方法了

以上解决方式：
一：
①编辑时将重置方法包裹在nextTick事件下

 this.$nextTick(() => {
         this.$refs.form.resetFields(); 
      });

②为编辑的表单赋值
③添加时 也增加一个重置方法

此时该表单的初始值是空的，并不是编辑的表单数据，所以添加时表单被重置为空的数据情况，并不会触发校验

二：
①编辑时将重置方法包裹在nextTick事件下
②为编辑的表单赋值
③将dialog的关闭事件设置为表单初始化
这样每次表单操作完毕后表单都初始化了，在添加事件时表单也是被重置为空的数据情况，也不会触发校验。

8、关于表单校验：
必须绑定的数据：
①el-form绑定model属性，否则会报这个错*[Form]model is required for validate to work!*
②el-form绑定ref属性。用于是否校验通过的判断。
this.$refs.form01.validate((valid) => {
if (valid) {
alert(“submit!”);
} else {
console.log(“error submit!!”);
return false;
}
});
③el-form绑定rules属性，传入该表单约定的校验规则
④form-item绑定prop属性，设置为需要校验的字段名（我愿称之为需要和rules内描写的校验字段统一，不一定要和model中的字段名统一。）

是否非空可以直接设置required属性，也可以在校验函数中设置，在校验函数中设置时页面上不会出现必填项的红星

一、若不自定义校验规则，即rules中这样写
rules: {
name: [
{
required: true,
message: “请输入”,
trigger: “change”,
},
{
min: 0,
max: 5,
message: “只能输入0-5位”,
trigger: “change”,
},
],
},
那么，form-item中绑定的prop属性值、rules中校验的字段名、该输入绑定的字段名需要一致。

二、若自定义校验规则，即rules这样写
rules: {
name2: {
validator: this.checkName2,
trigger: “blur”,
},
},
那么，form-item中绑定的prop属性值、rules中校验的字段名需要一致。输入框中绑定的数据属性名称不需要一致，输入的判断可在自定义的校验函数中写。

注意：
①校验规则的粒度是form-item，trigger为change或者blur，即只要这个form-item下有变化或者失去焦点就会触发校验，校验并不是针对于某个输入框的
②根据上一点，若校验没通过，则这个form-item下的框都会变红（不只是写了校验函数的那一个）
③自定义校验函数有三个输入参数，其中value参数的值是form-item的prop绑定的属性、该输入框绑定的表单数据的属性一致时返回的值。若不一致，该值是undefined