美文网首页
element-ui form表单自定义验证规则

element-ui form表单自定义验证规则

作者: 洪锦一 | 来源:发表于2023-01-12 10:42 被阅读0次
rules: {
        ip:[
          {pattern: /^[\d/.]*$/, message: "仅可输入数字与.", trigger: "change"}
        ],
        // 第一种方式
        UnitPriceIncludingTax: [
          //默认方式
          { required: true, message: "请填写", trigger: "blur" },
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: "请输入合法的金额数字,最多两位小数",
            trigger: "change",
          },
        ],
        // 第二种方式
        Phone: [
          { required: true, message: "请填写", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (
                value &&
                (
                  !/^[1][345789]\d{9}$/.test(value) ||
                  !/^[1-9]\d*$/.test(value) ||
                  value.length !== 11)
              ) {
                callback(new Error("手机号码不符合规范"));
              } else {
                callback();
              }
            },
          },
        ],
}

第二种

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ]
      }
    };
  },
}
</script>

相关文章

网友评论

      本文标题:element-ui form表单自定义验证规则

      本文链接:https://www.haomeiwen.com/subject/mxtwcdtx.html