更新时间:2022-04-26 GMT+08:00
分享

输入框

输入框是基础输入组件,输入框中的内容可以通过鼠标或键盘输入;一般在有需要输入内容、提供组合型条件查询或有其他资料需要提交时使用。

向页面中拖入一个输入框组件。单击输入框页签,显示可配置属性页面。

图1 输入框属性页面

输入框组件配置说明如表1所示。

表1 输入框属性说明

参数名

说明

文本类型

该输入框文本类型。

标签

该输入框在界面的展示标签名。必须是输入框存在于某个表单组件中,该标签设置才生效。

占位符

占位符。可辅助元素对齐,让页面更整齐。

可清空

是否可清空输入值。

默认值

该输入框默认值。

图标

输入框中需要设置图标时,请配置该项。

图标位置

输入框中的图标位置。

最大字符长度

输入框取值最大字符长度。

最大宽度

输入框最大的宽度。

必填

当该开关打开时,该输入框为必填字段。输入框界面展示会有提示必填,此校验功能必须是输入框存在于某个表单组件中。

必填错误信息

当必填输入框没有进行输入取值时的界面报错信息。

正则表达式

当输入框字段类型为“Text”或者“TextArea”类型,支持进行正则表达式校验。

例如配置为“^[A-Za-z]+$”,表示该字段只能输入大写的A-Z,或者小写的a-z。

错误信息

当不满足正则表达式规则时的界面报错信息。

自定义校验

是否进行自定义校验,打开后需要设置校验JS代码。在表单组件中该设置才会生效。打开开关后,请在下方输入JS代码定义校验规则,代码的返回值必须为布尔类型或者对象类型。

  • 布尔类型:返回为“false”表示未通过校验,即校验失败,若需要配置错误提示信息,则直接设置界面上“校验错误信息”参数;返回值为“true”,表示通过校验。
  • 对象类型:返回为“{result:false, message:'对应错误提示信息'}”,表示未通过校验,message值为错误提示信息;返回为“{result:true}”,表示校验通过,一般不用带提示信息。

举例如下:

  • 示例1:校验输入文字内容长度不能超过10个字符。示例JS代码如下:
    return value.length <= 10

    其中“value”变量为系统已定义好的,表示输入内容变量,可直接使用该变量

  • 示例2:校验输入文字内容只能输入大写的A-Z,或者小写的a-z。示例JS代码如下:
    返回值类型为布尔:
    var reg = new RegExp("^[A-Za-z]+$");
    return reg.test(value);
    返回值类型为对象:
    var reg = new RegExp("^[A-Za-z]+$");
    if (reg.test(value)) {
     return true;
    } else {
      return {result: false, message:'输入内容不符合规则,只能输入大写的A-Z,或者小写的a-z'};
    }
  • 示例3:校验输入文字内容是否是邮箱,该示例可能不覆盖全部邮箱类型场景,仅举例使用。示例JS代码如下:
    var reg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");
    return reg.test(value);

校验错误信息

当“自定义校验”中JS代码返回值类型为布尔类型时,会取该参数的值为错误提示信息。

说明:当“自定义校验”中JS代码返回值类型为对象类型时,直接取返回值中的message值为错误提示信息。

分享:

    相关文档

    相关产品

close