常用表单控件校验

小王码农记

已于 2024-07-04 16:43:23 修改

阅读量80

点赞数 2

分类专栏：前端校验文章标签：前端 javascript java

于 2024-06-04 16:22:28 首次发布

本文链接：https://blog.csdn.net/wch19960518/article/details/139443959

版权

前端校验专栏收录该内容

3 篇文章 0 订阅

订阅专栏

数据类型：0-100之间的整数或两位小数（像：完成进度）

<el-form-item label="完成进度(%)">
    <el-input type="number" v-model="formData.progress" placeholder="请填写0-100的数字" oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = ''; if(value.indexOf('.') > 0) value = value.match(/\d+\.?\d{0,2}/)"/>
</el-form-item>

数据类型：整数

<el-input type="number" v-model="value" placeholder="请输入整数" oninput="if(value.includes('.')) value=value.replace(/\./g, ''); if(value < 0 || value == '' || value == null) value=''; if(!/^\d+$/.test(value)) value=value.replace(/\D/g,'');"/>

数据类型：小数

<el-input type="number" v-model="value" placeholder="请输入（支持小数）" oninput="if(value < 0 || value == '' || value == null) value='';"/>

开始年份与结束年份选择器

<el-form ref="yearsFormRef" :model="projectInfo" :rules="yearsRules" label-width="auto">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="开始年份" prop="startYear">
            <el-date-picker
              v-model="projectInfo.startYear"
              type="year"  
              value-format="YYYY" 
              clearable
              style="width: 100%"
              placeholder="请选择开始年份"
              :disabled-date="disabledStartDate"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束年份" prop="endYear">
            <el-date-picker
              v-model="projectInfo.endYear"
              type="year"  
              value-format="YYYY" 
              clearable
              style="width: 100%"
              placeholder="请选择结束年份"
              :disabled-date="disabledEndDate"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="submit">保 存</el-button>
        </el-col>
      </el-row>
    </el-form>

// method
// 禁选开始年份
const disabledStartDate = (time) => {  
  const endYear = projectInfo.value.endYear;  
  if (endYear) {  
    return time.getFullYear() > parseInt(endYear, 10);  
  }  
  return false;  
};

// 禁选结束年份
const disabledEndDate = (time) => {  
  const startYear = projectInfo.value.startYear;  
  if (startYear) {  
    return time.getFullYear() < parseInt(startYear, 10);  
  }  
  return false;  
};