更新记录

3.3.8（2023-09-15） 下载此版本

1.新加了uv的日历组件

3.3.7（2023-06-23） 下载此版本

-1.修复图片赋值时，赋值错误

3.3.6（2022-08-02） 下载此版本

1.身份证错误提示

平台兼容性

formList 表单组件

uniapp 表单组件，可根据自身需求配置生成表单，集合身份证验证，手机验证，发送验证码等一般业务需求,可根据用户选择改变表单元素
在线H5-demo form-list

平台兼容

QQ群

821391485

安装

直接导入即可

代码演示

基本用法

html

<zhaoxin-formList @change="change"  @enter="enter" ref="formRef"  :formArr="formArr" :formObj.sync="formObj" @valid="valid" :config="config" @yzmRelatCode="yzmRelatCode" />
<view @click="submit" :class="{sub:validTF}">注册</view>

props

formArr 传入一个包含对象的数组，构建表单
formObj 传入一个对象，初始化组件的值
changeState 动态修改元素属性，或者配合单选多选显示隐藏某些元素
countList 传入一个字符串的数组，自动计算属性，可多条同时执行
config 组件通用配置，(可不传的)
buttons 内置的按钮组传入数组或对象，(可不传的)

重要的props

changeState

//html里
:changeState="changeState"
// data里
change:(val)=>{
    if (val.code=='xxx'&&val.value==1) {
        this.changeState=[
            {
                code:'xxx',
                show:true,
            },
            {
                el:'span',
                code:'xxx',
                show:false,
            },
        ]
    }
}

countList 自动计算

//html里
:countList="countList"
// data里
// 1. 可多条同时简单的加减乘除计算,
// 2.等号后面的字段也是必须写的，
// 3.不能有括号例如：(a+b)*c
countList:['code1+code2-code3*code4/code5=end1','code1-code3*code4/code5=end2']

 let  formArr= [
        {
          el: 'input',//输入框的类型，input是默认可以不写的
          label: '姓名',// 显示的名字，输入错误、placeholder也会默认“请输入+label”
          code: 'name',// 表单验证后接收的字段,这个需要是唯一的
          type: 'text',// 文本格式,text（默认普通文本）,number（数字）,digit（小数点，数值）,idcard（身份证）,password（密码）
          maxlength: 11,// 最小长度
          rexType: 'zh',//验证规则（zh 中文，number 数字，password 数字加特殊字符，phone 手机号，email 邮箱，idCard 身份证），也可以在util.js里的refObject配置自己需要的通用规则
          minlength: 3,// 最大长度
          required:false,//是否是必填，默认必填
          fun:getdata3,//传入请求数据的promise函数,组件会自动请求结果，默认会取res.data的值，不是的话用funMode（小程序不支持）
          // res是返回的结果，处理好了再返回给组件，完成自定义处理返回结果（小程序不支持）
          funMode:(res)=>[{value:56,label:'请求后加的数据'},...res.xxx.xx.map(v=>({value:v.id,label:v.name}))],
        },
        // 一般输入框可以怎样写
        {
          label: '姓名',
          code: 'name',
        },
        {
          el: 'select',
          label: '简单下拉',
          code: 'select',
          list:['羽毛球','LOL','mmp']//
        },
    ]
     // 对应数组里的code字段，写了就会赋值进去（用于修改信息），不写也会自动创建
     let  formObj={
         name:'2498489'
      },

buttons 按钮组

// buttons 是数组时
buttons:[
    {
        funType:'confirm',// confirm：确认按钮 触发验证事件，reset重置
        text:'验证变色',// 显示文字
        class:'btn_orange_h86 long round',// 内置按钮可见demo（或button.scss），也可自己写按钮样式，添加对于的class
        style:{// 按钮样式

        },
        changColor:true,//验证通过是否需要变色，通过会自动加上cant这class，如果自己写的按钮，也要加上&.cant不然不起作用
        changCantText:'未通过',//未通过时的文字，（默认不填）
        changCantStyle:{//自定义修改未通过验证的样式，样式层级高于style
           background:'gray'
        },
    },
    {
        funType:'reset',// 重置按钮
        text:'重置',
        class:'btn_red_h72 long'
    },
    {
        text:'一般按钮',
        class:'btn_wx_h64 long'
    },
]
// buttons 是对象时
buttons:{
    class:'',//作用于按钮组父级的class
    style:'',//作用于按钮组父级的 style
    list:[//按钮组
     {
        text:'一般按钮',
        class:'btn_wx_h64 long'
     },
    ]
}

事件

接收结果

submit(){
      if (this.$refs.formRef.checkForm()) {
        let data=this.$refs.formRef.checkForm()
      }
}
// 添加了按钮的才会有结果,funType=='confirm'时只有通过才会有回调，且有values
buttonClick(button){
    if (button.funType=='confirm') {
        let data=button.values
        console.log(data)
        // todo 提交结果
    }
}

重置表单

 this.$refs.formRef.reset()
 // 保留不重置的字段，用逗号隔开
 this.$refs.formRef.reset('code1,code2')

enter

  // 按下enter时触发提交表单
    enter(val){
      if (val) {
        this.submit()
      }
    },

change

  // 表单变化change
    change(val){
      console.log(val)
    },

验证码处理

 组件里加 @yzmRelatCode="yzmRelatCode"
 // 接受验证码 接收的是关联的组件有code和 results 返回值
    yzmRelatCode(val){
      if (val.results) {
        // 验证码是可以多个的
        if(val.code==xxx){
            // 这里做请求
         }
        if(val.code==xxx){
            // 这里做请求
         }
      }
    },

动态获取验证结果

    // 是否通过可以用来改变按钮颜色
   valid(val){
       this.validTF=val
     },

右边点击事件

    // 返回对应的对象，val.value是前面输入框的值，val.valueRight 多个元素时点中的元素
       rightClick(val){
         console.log(val)
         console.log(val.value)
       },

checkForm 接收表单验证后返回的结果

小程序配置自定义验证的添加

（鉴于小程序不能动态传入正则于此做的妥协）

// 在全局添加一个selfPattern的对象
Vue.prototype.selfPattern={
  test:{
    name:'中文',//这个key这是提示，不必填的
    pattern:/^[\u4e00-\u9fa5]+$/,// 正则
    error:'请输入中文',// 验证失败时的报错
  },
  test2:{
      name:'中文',//这个key这是提示，不必填的
      pattern:/^[\u4e00-\u9fa5]+$/,// 正则
      error:'请输入中文',// 验证失败时的报错
  },
}
// 使用时直接用它的key即可
rexType:'test'

config 表单配置

formArr说明