美文网首页
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