vue+element-ui实现form表单动态验证是否为空并且验证是否只能输入数组或者小数

酒渣

已于 2022-02-14 16:39:21 修改

阅读量2k

点赞数 1

分类专栏： vue 文章标签： vue.js elementui html

于 2022-02-14 16:32:02 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_40923558/article/details/122927024

版权

vue 专栏收录该内容

20 篇文章

订阅专栏

vue+element-ui实现form表单动态验证是否为空并且验证是否只能输入数组或者小数

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <el-row>
      <el-radio v-model="radio" label="0" @change="checkChange(radio)">验证第一列</el-radio>
      <el-radio v-model="radio" label="1" @change="checkChange(radio)">验证第二列</el-radio>
      <el-radio v-model="radio" label="2" @change="checkChange(radio)">全不验证</el-radio>
      <el-radio v-model="radio" label="3" @change="checkChange(radio)">全部验证</el-radio>
    </el-row>

    <el-row style="margin-top: 15px;">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
        <el-col :span="6">
          <el-form-item label="类型一:" prop="type1">
            <el-input v-model="form.type1"></el-input>
          </el-form-item>
          <el-form-item label="类型二:" prop="type2">
            <el-input v-model="form.type2"></el-input>
          </el-form-item>
          <el-form-item label="类型三:" prop="type3">
            <el-input v-model="form.type3"></el-input>
          </el-form-item>
          <el-form-item label="类型四:" prop="type4">
            <el-input v-model="form.type4"></el-input>
          </el-form-item>
          <el-form-item label="类型五:" prop="type5">
            <el-input v-model="form.type5"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类型六:" prop="type6">
            <el-input v-model="form.type6"></el-input>
          </el-form-item>
          <el-form-item label="类型七:" prop="type7">
            <el-input v-model="form.type7"></el-input>
          </el-form-item>
          <el-form-item label="类型八:" prop="type8">
            <el-input v-model="form.type8"></el-input>
          </el-form-item>
          <el-form-item label="类型九:" prop="type9">
            <el-input v-model="form.type9"></el-input>
          </el-form-item>
          <el-form-item label="类型十:" prop="type10">
            <el-input v-model="form.type10"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-button type="primary" @click="uploadBtnClick()">提 交</el-button>
    </el-row>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data(){
      let isVerif = (rule, value, callback)=>{
        if (rule.required){
          let title = '';
          if (rule){
            if(rule.field in this.formName){
              title = this.formName[rule.field]
            }
          }
          if (value){
            let valueString = value.toString();
            if (valueString.length > 5){
              callback(new Error(title+'总长度为5'))
            } else {
              let patrn = /^[0-9]+\.?[0-9]*$/;
              if (!patrn.exec(value)){
                callback(new Error(title+'为小数或整数'));
              } else {
                callback();
              }
            }
          } else {
            callback(new Error(title+'不能为空'));
          }
        } else {
          callback();
        }
      };
      return {
        radio: '3',
        form: {
          type1: '',
          type2: '',
          type3: '',
          type4: '',
          type5: '',
          type6: '',
          type7: '',
          type8: '',
          type9: '',
          type10: '',
        },
        rules:{
          type1: [{validator: isVerif, required: true, trigger: 'blur'}],
          type2: [{validator: isVerif, required: true, trigger: 'blur'}],
          type3: [{validator: isVerif, required: true, trigger: 'blur'}],
          type4: [{validator: isVerif, required: true, trigger: 'blur'}],
          type5: [{validator: isVerif, required: true, trigger: 'blur'}],
          type6: [{validator: isVerif, required: true, trigger: 'blur'}],
          type7: [{validator: isVerif, required: true, trigger: 'blur'}],
          type8: [{validator: isVerif, required: true, trigger: 'blur'}],
          type9: [{validator: isVerif, required: true, trigger: 'blur'}],
          type10: [{validator: isVerif, required: true, trigger: 'blur'}],
        },
        formName: {
          type1: '类型一',
          type2: '类型二',
          type3: '类型三',
          type4: '类型四',
          type5: '类型五',
          type6: '类型六',
          type7: '类型七',
          type8: '类型八',
          type9: '类型九',
          type10: '类型十',
        }
      }
    },
    methods: {
      checkChange(radio){
        if (radio == '0'){
          for (let i = 1; i <= 5; i++) {
            this.rules['type'+i].length ? this.rules['type'+i][0].required = true : this.rules['type'+i]
          }
          for (let i = 6; i <= 10; i++) {
            this.rules['type'+i].length ? this.rules['type'+i][0].required = false : this.rules['type'+i]
          }
        } else if (radio == '1'){
          for (let i = 6; i <= 10; i++) {
            this.rules['type'+i].length ? this.rules['type'+i][0].required = true : this.rules['type'+i]
          }
          for (let i = 1; i <= 5; i++) {
            this.rules['type'+i].length ? this.rules['type'+i][0].required = false : this.rules['type'+i]
          }
        } else if (radio == '2'){
          for (let i = 1; i <= 10; i++) {
            this.rules['type'+i].length ? this.rules['type'+i][0].required = false : this.rules['type'+i]
          }
        } else {
          for (let i = 1; i <= 10; i++) {
            this.rules['type'+i].length ? this.rules['type'+i][0].required = true : this.rules['type'+i]
          }
        }
      },

      uploadBtnClick(){
        this.$refs['form'].validate((valid) => {
          if (valid) {
            console.log('验证通过, 可以提交')
          }
        })
      }
    }
  })
</script>
</html>