• Form
    • 示例代码
    • 属性列表
    • 内置校验规则
    • 接口
      • validate
      • validateField
    • Slot

    Form

    Form表单组件,结合Cell、Checkbox-group、Checkbox组件等做表单校验。

    示例代码

    示例代码

    属性列表

    属性类型默认值必填说明
    ext-classstring添加在组件内部结构的class,可用于修改组件内部的样式
    rulesobject<array>表单校验的规则列表,格式下面详细介绍
    modelsobject需要校验的表单的数据
    bindsuccesseventhandler校验成功触发的事件,detail是{trigger},trigger的值是change或validate,表示是输入改成触发的校验还是主动调用的validate接口
    bindfaileventhandler校验失败触发的事件,detail是{trigger, errors},trigger的值是change或validate,表示是输入改成触发的校验还是主动调用的validate接口。errors是错误的字段列表。

    rules是表单校验的规则列表,列表每一项表示一个字段的校验规则,注意,必须要在Cell或Checkbox-group组件声明prop属性,表单校验规则才生效,表单校验规则的定义如下:

    属性类型默认值必填说明
    namestring校验的字段名
    rulesarray/object校验的规则,如果有多项,则是数组
    rules.messagestring校验失败时候提示的文字
    rules.validatorfunction自定义校验函数,接受rule, value, param, models四个参数,其中rule格式为{name: '字段名', message: '失败信息'}, value是字段值,param是校验参数,models是form组件的models属性。函数返回错误提示,表示校验失败,错误提示会通过回调返回给开发者
    rules.[rule]stringrule是变量,表示内置的校验规则名称,比如required,则校验规则对象为{name: "fieldName", rules: {required: true}},下面会详细介绍所有的内置规则

    内置校验规则

    规则名参数说明
    required是否必填
    minlengthnumber最小长度
    maxlengthnumber最大长度
    rangelength[number, number]长度范围,参数为[最小长度, 最大长度]
    bytelengthnumber字节长度
    range[number, number]数字的大小范围
    minnumber最小值限制
    maxnumber最大值限制
    mobile手机号码校验
    email电子邮件校验
    urlURL链接地址校验
    equalTostring相等校验,参数是另外一个字段名

    接口

    validate

    validate接口接受类型为function的callback,callback有isValid和errors两个参数,isValid表示是否校验通过,errors在校验失败的时候的值为失败的字段列表。

    validateField

    validateField接口接受2个参数,第一个是字段名,第二个是类型为function的callback,callback有isValid和errors两个参数,isValid表示是否校验通过,errors在校验失败的时候的值为失败的字段列表。

    Slot

    名称描述
    默认内容slot