2021/11/3 el-form：一行el-form-item内多个输入框的校验---【一个表单校验内的多个校验写法】

最新推荐文章于 2024-09-24 15:29:26 发布

Zhang_aichi

最新推荐文章于 2024-09-24 15:29:26 发布

阅读量1.9k

点赞数

文章标签： vue elementui

原文链接：https://blog.csdn.net/DcTbnk/article/details/119786208?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163590868516780262591738%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163590868516780262591738&biz_id=0&utm_medium=

版权

el-form：一行el-form-item内多个输入框的校验---【一个表单校验内的多个校验写法】_DcTbnk的博客-CSDN博客

HTML

<!-- 薪资范围 -->
              <el-form-item label="薪资范围/Salary range" prop="Salary">
                <el-input
                  v-model="ruleForm.minSalary"
                  placeholder="Minimum salary"
                  prop="minSalary"
                  class="inputWmin"
                ></el-input
                ><span>k</span>
                <el-input
                  v-model="ruleForm.maxSalary"
                  placeholder="Maximum salary"
                  prop="maxSalary"
                  class="inputWmin"
                ></el-input
                ><span>k</span>
                <!-- <span>只能输入整数，如：9</span> -->
              </el-form-item>

 data() {
    //判断是数字 且>0
    function isNumberStr(str) {
      var value = Number(str);
      console.log(value, "aaa");
      if (!isNaN(value) && value > 0) {
        console.log("是数字并且>0");
        return true;
      } else {
        console.log("不是数字后或<0");
        return false;
      }
    }
    //薪资自定义校验
    var mustsalary = (rule, value, callback) => {
      //最低薪资必填
      if (!this.ruleForm.minSalary || !this.ruleForm.maxSalary) {
        callback(new Error("Please fill in the salary"));
      } //判断薪资格式
      else if (
        !isNumberStr(this.ruleForm.minSalary) ||
        !isNumberStr(this.ruleForm.maxSalary)
      ) {
        callback(new Error("Note the format!"));
      } else {
        callback();
      }
    };

添加校验

//校验
      rules: {
       
        //月薪范围
        Salary: [
          {
            validator: mustsalary,
            trigger: ["blur", "change"],
          },
        ],
      }