avue表单验证;avue自定义表单验证;avue-curd在配置项中进行验证

avue自定义表单验证

 data() {
    var validateSpeed = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入默认速度'));
      } else if (value < 0 || value > 0.5) {
        callback(new Error('请输入0-0.5之间的数字'));
      } else {
        callback();
      }
    };
    var validateDistance = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入障碍范围'));
      } else if (value < 0.5 || value > 2) {
        callback(new Error('请输入0.5-2之间的数字'));
      } else {
        callback();
      }
    };
    return {
      option: {
        column: [
          {
            label: "默认速度",
            prop: "speed",
            append: '范围(0m/s-0.5m/s)',
            hide: true,
            rules: [
              {
                required: true,
                message: "请输入默认速度",
                trigger: "blur"
              },
              { validator: validateSpeed, trigger: 'blur' }
            ]
          },
          {
            label: "默认左前避障距离",
            prop: "lfUsDis",
            append: '范围(0.5m-2.0m)',
            hide: true,
            rules: [
              {
                required: true,
                message: "请输入默认左前避障距离",
                trigger: "blur"
              },
              { validator: validateDistance, trigger: 'blur' }
            ]
          },
        ]
      },
     
    };
  },

avue-curd在配置项中进行验证

         {
            label: "默认速度",
            prop: "speed",
            append: '范围(0m/s-0.5m/s)',
            hide: true,
            rules: [
              {
                required: true,
                message: "请输入默认速度",
                trigger: "blur"
              },
              { 
                pattern:/^[a-zA-Z0-9]+$/, 
                trigger: 'blur',
                message: "请输入......"
              }
            ]
          },

你可能感兴趣的:(avue,前端)