vue+element实现单选框嵌套输入框及动态校验

功能需求：生成ID的方式（两种方式做radio单选，选择方式切换显示内容，选择自定义时嵌套input对其校验）自动生成自定义填写ID代码：<el-form style="max-width: 550px"label-width="150px":model="ruleForm":rules="rules"ref="ruleForm"><el-form-i

TING沫

5363人浏览 · 2022-03-01 16:20:29

TING沫 · 2022-03-01 16:20:29 发布

功能需求：

生成ID的方式（两种方式做radio单选，选择方式切换显示内容，选择自定义时嵌套input对其校验）

自动生成
自定义填写ID

代码：

<el-form style="max-width: 550px" label-width="150px" :model="ruleForm" :rules="rules" ref="ruleForm">
    <el-form-item label="ID生成规则" prop="IdRule">
        <el-radio-group v-model="ruleForm.IdRule">
          <el-radio label="1">自动生成</el-radio>
          <el-radio label="2">自定义ID</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--绑定rules，判断是否选择自定义选项对input动态校验-->
      <!-- :rules="ruleForm.IdRule == '2' ? rules.customProID : [{ required: false}]"-->
      <el-form-item prop="customProID" :rules="ruleForm.IdRule == '2' ? rules.customProID : [{ required: false}]">
        <span class="automatic"
              v-if="ruleForm.IdRule == 1">自动生成产品ID，请在创建成功的详情页进行查看</span>
        <el-input v-if="ruleForm.IdRule == 2" placeholder="请输入自定义产品ID" v-model="ruleForm.customProID"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="$router.back()">取消</el-button>
      </el-form-item>
</el-form>

<script>
export default {
  data () {
    const validateID = (rule, value, callback) => {
      if (value.length > 32) {
        callback(new Error('超出长度限制，请输入32位以内'))
      } else {
        if (/^[0-9a-zA-Z]{1,32}$/.test(value)) {
          callback()
        } else {
          callback(new Error('仅限输入字母和数字'))
        }
      }
    }
    return {
      ruleForm: {
        IdRule: '1',
        customProID: '',
      },
      rules: {
        IdRule: [
          { required: true, message: "必选,请选择", trigger: "blur" }
        ],
        customProID: [
          { required: true, message: "必填,请输入", trigger: "blur" },//非空校验
          { validator: validateID, trigger: "blur" }//自定义校验
        ],
      },
    };
  },
  watch: {
  //监听input输入，不能输入空格
    "ruleForm.customProID" (val) {
      if (typeof (val) === "string") {
        this.ruleForm.productName = val.replace(/\s/g, "");
      }
    },
  },
  methods: {
    onSubmit () {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) {
          // 校验不通过直接return
          return;
        }else{
        this.$message('submit success！！！');
        }
    },
  },
};

<style>
.automatic {color: #c0c4cc;}
</style>

————————————————————————————————————————————————————————————

单选嵌套输入框第二种写法

<el-form style="max-width: 550px" label-width="150px" :model="ruleForm" :rules="rules" ref="ruleForm">
    <el-form-item label="ID生成规则" prop="IdRule">
        <el-radio-group v-model="ruleForm.IdRule">
            <el-radio label="1" @change="changeShow">自动生成</el-radio>
            <el-radio label="2" @change="changeShow">自定义</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item prop="customProID" :rules="ruleForm.IdRule == '2' ? rules.customProID : [{ required: false}]">
        <el-input v-if="Show" placeholder="请输入URL" v-model="ruleForm.customProID"></el-input>
    </el-form-item> 
    <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="$router.back()">取消</el-button>
    </el-form-item>
</el-form>

<script>
export default {
  data () {
    const validateID = (rule, value, callback) => {
      if (value.length > 32) {
        callback(new Error('超出长度限制，请输入32位以内'))
      } else {
        if (/^[0-9a-zA-Z]{1,32}$/.test(value)) {
          callback()
        } else {
          callback(new Error('仅限输入字母和数字'))
        }
      }
    }
    return {
      ruleForm: {
        Show: false,
        IdRule: '1',
        customProID: '',
      },
      rules: {
        IdRule: [
          { required: true, message: "必选,请选择", trigger: "blur" }
        ],
        customProID: [
          { required: true, message: "必填,请输入", trigger: "blur" },//非空校验
          { validator: validateID, trigger: "blur" }//自定义校验
        ],
      },
    };
  },
  watch: {
  //监听input输入，不能输入空格
    "ruleForm.customProID" (val) {
      if (typeof (val) === "string") {
        this.ruleForm.productName = val.replace(/\s/g, "");
      }
    },
  },
  methods: {
    changeShow (param) {
        if (param === '2') {
            this.urlShow = true
        } else {
            this.urlShow = false
        }
    },
    onSubmit () {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) {
          // 校验不通过直接return
          return;
        }else{
        this.$message('submit success！！！');
        }
    },
  },
};

<style>
.automatic {color: #c0c4cc;}
</style>

————————————————————————————————————————————————————————————

使用数据字典做循环（后期维护定义名称）

<el-form-item label="产品ID规则" prop="IdRule">
    <el-radio-group v-model="ruleForm.IdRule">
        <el-radio v-for="opt in dict.create_rule" :key="opt.lable" :label="String(opt.lable)">{{opt.value}}</el-radio>
    </el-radio-group>
</el-form-item>
<el-form-item style="margin-top:-15px;" prop="customProID" :rules="ruleForm.IdRule == '2' ? rules.customProID : [{ required: false}]">
    <span class="automatic" v-if="ruleForm.IdRule == 1">平台自动生成产品ID，请在创建成功的产品详情页进行查看</span>
    <el-input v-if="ruleForm.IdRule == 2" placeholder="请输入自定义产品ID" v-model="ruleForm.customProID"></el-input>
</el-form-item>

<script>
export default {
  data () {
    const validateID = (rule, value, callback) => {
      if (value.length > 32) {
        callback(new Error('超出长度限制，请输入32位以内'))
      } else {
        if (/^[0-9a-zA-Z]{1,32}$/.test(value)) {
          callback()
        } else {
          callback(new Error('仅限输入字母和数字'))
        }
      }
    }
    return {
      dicts: ["create_rule"],
      ruleForm: {
        IdRule: '1',
        customProID: '',
      },
      rules: {
        IdRule: [
          { required: true, message: "必选,请选择", trigger: "blur" }
        ],
        customProID: [
          { required: true, message: "必填,请输入", trigger: "blur" },//非空校验
          { validator: validateID, trigger: "blur" }//自定义校验
        ],
      },
    };
  },
  watch: {
  //监听input输入，不能输入空格
    "ruleForm.customProID" (val) {
      if (typeof (val) === "string") {
        this.ruleForm.productName = val.replace(/\s/g, "");
      }
    },
  },
  methods: {
    onSubmit () {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) {
          // 校验不通过直接return
          return;
        }else{
        this.$message('submit success！！！');
        }
    },
  },
};

<style>
.automatic {color: #c0c4cc;}
</style>

————————————————————————————————————————————————————————————
需求：
弹窗表单编辑别名功能 ——> 输入框中必须填写当前产品的名称加数字，不得超过20字符

<el-input v-model="form.productName" maxlength="20"></el-input>

form:{ 
  productName:'' 
},
rules:{
  productName: [ { required: true, message: '请输入', trigger: 'blur' } ],
},

//数字正则校验
checkNumber(str) {
  var reg = /^[0-9]+\.?[0-9]*$/;
  if (reg.test(str)) {return true;}
  return false;
},
//提交编辑信息
submitUpdate(){
  this.$refs["form"].validate((valid) => {
    if (!valid) {return;}// 校验不通过直接return
        let devAlias=this.form.productName//当前输入框中产品别名
        let nameLength=this.oldProductName.length //oldProductName是产品名称
        let newStr = devAlias.substr(nameLength) //.substr(length)取产品名称后的数字字符串
        if(devAlias.indexOf(String(this.oldProductName))==0 && this.checkNumber(newStr)){
          //判断input框中产品别名字符串起始位置是否是产品名称字符串
          //devAlias.indexOf(String(this.updateDevName))==0
          //调用方法校验产品名称后的数字字符串是否全部为数字
          //this.checkNumber(newStr)
        }else{
          this.$message({
              type: "error",
              message: "操作失败，请输入名称为该产品名称加数字",
          });
        } 
      })
    },

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^