Element UI表单验证自定义规则 rules validator (中文、数字和英文 / 数字和小数点)

1,464 阅读1分钟
  • 限制element-ui表单中input框只能输入中文、数字和英文
  • 限制element-ui表单中input框只能输入数字和小数点,并仅保留两位小数
<el-form :model="formInline"  :rules="rules" ref="ruleForm">
<el-form-item label="合同编号" prop="contractNo">
  <el-input   v-model.trim="formInline.contractNo"  placeholder="合同编号" maxlength="50" ></el-input>
</el-form-item>
<el-form-item label="合同金额" prop="contractMoney">
  <el-input  
    maxlength="15"
    oninput="value=value.replace(/[^\d.]/g,'')"
    v-model="formInline.contractMoney"
    placeholder="合同金额"
</el-form-item>
</el-form>
  data() {
  //  限制element-ui表单中input框只能输入数字和小数点
    var validatePrice = (rule, value, callback) => {
      value = String(value);
      if (value && value.split(".").length > 2) {
        callback(new Error("请输入正确格式的金额")); //防止输入多个小数点
      } else if (value && value.split(".").length == 2) {
        value = Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2); //有小数点时
        value = Number(value).toFixed(2); //不足补位
        this.formInline.contractMoney = value;
        callback();
      } else {
        callback();
      }
    };
    //  限制element-ui表单中input框只能输入中文、数字和英文
    var validateName = (rule, value, callback) => {
      const title = /^[\a-\z\A-\Z0-9\u4e00-\u9fe5]+$/;
      if (value == "" || value == null || title.test(value)) {
        callback();
      } else (!title.test(value)) {
        callback(new Error("只能输入中文、数字和英文"));
      }
    };
   retrun {
     formInline: {
       contractNo: null,//合同编号
       contractMoney: null, //合同金额
     }
     rules: {
       contractNo: [
        {
          required: true,
          validator: validateNo,
          message: "请输入正确的合同编号",
          trigger: "blur",
        },
      ],
      contractMoney: [
        {
          required: false,
          validator: validatePrice,
          message: "请输入正确的合同金额",
          trigger: "blur",
        },
      ]
    }
   }
 }