element ui 校验

 

 

            { required: true, message: '数值不能为空' },
            { max: 8, message: '数值长度小于8位' },
            { pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '请输入正数'}

 

 

 

 

 editFormRules: {
        materialName: [{ max: 60, message: '输入内容超过最大长度！（60）', trigger: 'blur' },
          {
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          },
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: '名称不支持特殊字符',
            trigger: 'blur'
          }
        ],
        knowledgeTypeId: [
          {
            required: true,
            message: '请选择知识分类',
            trigger: 'change'
          }
        ]
      },

 

 editFormRules: {
        title: [
          { required: true, message: '请输入题目名称', trigger: 'blur' },
          { max: 60, message: '已超出最大长度！', trigger: 'blur' }
        ],
        multipleCount: [
          {
            pattern: /^([0-9]{1,10})$/,
            message: '只能输入小于10位数字',
            trigger: 'blur'
          }
        ],
        titleNo: [
          { required: true, message: '请输入题目编号', trigger: 'blur' },
          {
            pattern: /^([0-9]{1,10})$/,
            message: '只能输入数字',
            trigger: 'blur'
          },
          { max: 32, message: '已超出最大长度！', trigger: 'blur' }
        ],
        titleType: [{
          required: true,
          message: '请输入题目类型',
          trigger: 'blur'
        }],
        surveyTypeId: [{
          required: true,
          message: '请输入问卷分类',
          trigger: 'blur'
        }]
      },

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<template>
  <!-- from表单-->
  <el-dialog :title="dialogFormTile" :visible.sync="dialogFormVisible" :before-close="handleClose">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
      <el-form-item label="策略" prop="strategyTypeCode">
        <el-input v-model="ruleForm.strategyTypeCode" />
      </el-form-item>
      <el-form-item label="名字" prop="strategyTypeName">
        <el-input v-model="ruleForm.strategyTypeName" />
      </el-form-item>
      <el-form-item label="类型" prop="cycleType">
        <el-select v-model="ruleForm.cycleType">
          <el-option
            v-for="item in cycleTypeOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="方式" prop="transferMode">
        <el-input v-model="ruleForm.transferMode" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="resetForm('ruleForm')">返回</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import ScStrategyConfiguratiA from '@/api/pxf-plan-management/ScStrategyConfiratiA'
const cycleTypeOption =
  {
    value: 0,
    label: '年度'
  },
  {
    value: 1,
    label: '季度'
  },
  {
    value: 2,
    label: '月度'
  }
]

export default {
  data() {
    return {
      cycleTypption: Object.assign({}, cycleTypeOption),
      dialogFormTile: '',
      dialogFormVisible: false,
      ruleForm: Object.assign({}, fromData),
      rules: {
        strategyTCode: [
          { max: 20, message: '已超出最大长度20！', trigger: 'blur' },
          { required: true, message: '请输入策略类型编码', trigger: 'blur' }
        ],
        stregyTypame: [
          { max: 20, message: '已超出最大长度20！', trigger: 'blur' },
          { required: true, message: '请输入策略类型名字', trigger: 'blur' }
        ],
        cycleTpe: [
          { required: true, message: '请选择周期类型', trigger: 'change' }
        ],
        tranerMode: [
          { max: 20, message: '已超出最大长度20！', trigger: 'blur' },
        ],
        rerk: [
          { max: 100, message: '已超出最大长度100！', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.guid === undefined) {
            ScStrateConfiguratii.save(this.ruleForm).then((res) => {
              if (res.status === 0) {
                this.dialogFormVisible = false
                this.$emit('queryList')
                this.$refs[formName].resetFields()
              }
            })
          } else {
            ScSategyConurionApi.update(this.ruleForm).then((res) => {
              if (res.status === 0) {
                this.dialogFormVisible = false
                this.$emit('queryList')
                this.$refs[formName].resetFields()
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetForm(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    // 显示对话框
    showSaveDia(show, type, row) {
      this.dialogFormVisible = show
      if (type === 'add') {
        this.dialogFormTile = '新增'
      } else if (type === 'update') {
        this.dialogFormTile = '修改'
        this.ruleForm = Object.assign({}, row)
      }
    },
    handleClose(done) {
      done()
      this.$refs['ruleForm'].resetFields()
    }
  }
}
</script>