zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    设计模式-策略模式
    java8 流式编程
    《JAVA8开发指南》使用流式操作
    linux如何查看端口被哪个进程占用?
    mac 启动php-fpm报错 failed to open configuration file '/private/etc/php-fpm.conf': No such file or direc
    Mac home 目录下创建文件夹
    UML由浅入深
    PHP扩展Swoole的代码重载机制
    Gedit中文乱码
    linux 内核源码arch/ 目录的前世今生
  • 原文地址:https://www.cnblogs.com/javascript9527/p/12587436.html
Copyright © 2011-2022 走看看