宜搭中使用js语句设置事件响应动作和校验

宜搭作为低代码平台,有很多现成的组件和功能,但是仍然有一些功能的实现没那么方便。

根据选项控制文本组件是否必填:

例如一个选项组件和文本组件,选择A时设置文本组件必填,否则不是必填。

首先设置文本组件默认状态为非必填,然后记住文本组件的唯一标识,例如:textareaField_xxx

然后在单选组件中新建动作,onchange值发生变化时,将这段代码填入:

export function onChange({ value }) {
  console.log('onChange', value);

  if (value == "A") {
    this.$('textareaField_xxx').setValidation([{ type: 'required' }])
  }
  else {
    this.$('textareaField_xxx').setValidation()
  }
}

即可实现选择A时,文本组件为必填,否则为非必填。

一些常见的校验:

宜搭的组件,之前是自带一些校验的,例如手机号,身份证,但是不知道为什么有次更新后,这些自带的校验就没了,可以在文本组件的校验中,用自定义函数来实现,如果会正则表达式则会方便很多。

(1)验证车牌号(包含新能源车牌)

function validateRule(value) {
  // 正则表达式,用于验证车牌号格式
  var pattern = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/;

  // 验证车牌号格式
  if (!pattern.test(value)) {
    return false;
  }

  return true;
}

(2)验证手机号

function validateRule(value) {
  // 正则表达式,用于验证手机号格式
  var pattern = /^1[3-9]\d{9}$/;

  // 验证手机号格式
  if (!pattern.test(value)) {
    return false;
  }

  return true;
}

(3)验证身份证号

function validateRule(value) {
  const regex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dX]$/;

  if (regex.test(value)) {
    return true; // 是身份证号
  } else {
    return false; // 不是身份证号
  }
}

(4)验证电子邮箱

function validateRule(value) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const isValidEmail = regex.test(value);
  if (!isValidEmail) {
    return false;
  }
  return true;
}

(5)验证是否大于当前日期

export function disabledDate(value) {
  console.log('disabledDate', value);
  if (value < new Date) {
    return true;
  }
  return false;
} 

宜搭中使用js语句设置事件响应动作和校验》有一个想法

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据