补充一些校验方法element

1:对表单进行验证时,1:用:rules="rules"来绑定,其中:model="form"也是必不可少的,不然即使填了正确的值,也会报错---如:“输入不能为空!”

<el-form ref="form" :model="form" :rules="rules">
</el-form>

2:当有些东西不放在表单里面(比如下列的日期选择器),但也需要验证时,可以单独加在表单中(表单中第五行)

<el-form ref="form" :model="form" :rules="rules">
  <el-form-item label="会议时间" label-width="120px" required>
    <el-col :span="8">
      <el-form-item
      :rules="[{ required: true, trigger: 'blur', message: '请输入会议日期' }]"
      >
        <el-date-picker
        v-model="date"
        :value-format="datePickerFormat"
        type="date"
        placeholder="选择日期"
        style="width: 100%;"
        :clearable="false"
        :picker-options="pickerOptions"
        @change="handleDateChange"
        />
      </el-form-item>
    </el-col>
  </el-form-item>
</el-form>

3:当一个表单需要多个校验时

rules: {
  subject: [{ max: 20, message: '输入内容超过最大长度!(20)', trigger: 'blur' },
            { required: true, pattern: '[^ \x22]+', trigger: 'blur', message: '请输入主题' }
           ],
}

 

posted @ 2021-12-23 17:37  西风多少恨11577  阅读(32)  评论(0)    收藏  举报