简单Vue项目-Form表单验证

1. HTML

<!--A-->
<el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm">
    <!--B-->
    <el-form-item label="下拉选" prop="selectInput" class="marginBot">
        <el-select v-model="form.selectInput" clearable filterable placeholder="请选择" @change="changeSelect">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
    </el-form-item>
    <!--C-->
    <el-form-item label="日期选择" prop="dateInput" class="marginBot">
        <el-date-picker
          :value-format="dateFormat"
          v-model="form.queryDate"
          :type="dateType"
          placeholder="选择日期"
          :default-time="defaultDate"
          :picker-options="pickerOptions"
        />
    </el-form-item>
</el-form>
...
export default {
    data() {
        return {
            form: {
                selectInput: "",
                queryDate: "",
                pageNum: 1,
                pageSize: 10,
                total: 0,
                ...
            },
            options: [
                {name: optionHtml, value: optoinName}
            ],
            dateFormat: "yyyy-MM-dd HH:mm:ss",
            pickerOptions: {
                disabledDate(date) {
                  // 禁止选择大于今天的日期
                  return date > new Date();
                }
            },
            dateType: 'datetime',
            <!--D-->
            defaultDate: dataFormat.DateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss'),            rules: {
            rules: {
                selectInput: [
                    { required: true, message: '请选择管理单位', trigger: 'change' }
                ],
                dateInput: [
                    { required: true, message: '请选择查询日期', trigger: 'change' }
                ]
            },
            ...
        }
    }

说明：

• A处的model是申明对应的form对象；rules是form对应的验证规则对象；ref是申明组件，之后会在方法调用时使用。

• B处的label是申明字段名称；prop是申明对应rules中的规则对象，这里如果申明了样式上会有红色星号（*）。

• C处和B处基本相同，一个是下拉选，一个是时间选择。

• D处的dataFormat.DateFormat不能提供，是时间格式化代码。

2. JS

<!--E-->
clearOpt(){
    <!--F-->
    this.$refs.form.resetFields();
},
<!--G-->
searchData(){
  const param = {
    selectInput: this.form.selectInput,
    <!--H-->
    queryDate: dataFormat.DateFormat(this.form.queryDate, 'yyyy-MM-dd HH:mm:ss'),
  }
  this.$refs.form.validate((valid) => {
    if (valid) {
      searchList(param)
        .then((res) => {
          this.list = res.data
          this.form.pageNum = res.data.pageNum;
          this.form.pageSize = res.data.pageSize;
          this.form.total = parseInt(res.data.total)
        })
        .catch((err) => {})
        .finally(() => {});
    }
  })
},

说明：

• E处是清空方法。

• F处this.$refs.form就是在A处申明的ref属性。

• G处是搜索方法。

• H处的dataFormat.DateFormat代码不能上传，是将日期数据转化成字符串的方法。