能不能出个form表单验证组件之类的

[songyx95]

小程序的用的比较麻烦

能不能出个form表单验证组件之类的，这样最好不过了

[ltsxs]

+1
希望可以将h5版的form表单校验移植过来

[zhaocchen]

+1

[601460003]

+1

[LYY-castle]

+1

[xx668888]

+1

[dxlani]

+1

[studylss]

+1

[a51427051]

+1

[www295686243]

+1

[ruyar2020]

希望出form组件，不然好难写啊

[ghost]

+1

[Albertlws]

+1

[SSRChen]

2021年了……还是没有

[dxlani]

我这里有一个，简单易用，与el,antd2.x的校验类似 有兴趣的私密我吧

[dustq]

大家都怎么处理form表单提交的

[liangxiaoxin]

+1

[liangxiaoxin]

这是我的表单校验代码 @dustq 我使用的是toast提示的方式

const validRules = {
  isPhone: function (value, callback) {
    return (/^1[3|4|5|7|8|9][0-9]\d{4,8}$/.test(value) && value.length === 11)
  },
}
data: {
	rules: {
      name: [
        {
          require: true,
          tips: '请输入姓名'
        }
      ],
      phoneNumber : [
        {
          require: true,
          tips: '请输入手机号'
        },
        {
          validator: validRules.isPhone,
          tips: '手机号输入有误'
        }
      ],
    }
},
save () {
let {rules} = this.data
    let isValid = true
    Object.keys(rules).forEach((key, index) => {
      rules[key].forEach((rule, ruleIndex) => {
        if ((rule.require && !this.data[key]) || (this.data[key] && rule.validator && !rule.validator(this.data[key]))) {
          wx.showToast({
            title: rule.tips,
            icon: 'none',
            mask: true,
          })
          isValid = false
          throw Error(`${key} is Error ${rule.tips}`)
        }
      })
    })
    if (!isValid) {
    	console.log('校验不通过')
      return
    }else {
    	console.log('校验通过')
    }
}

[zhoucumt]

强烈希望出个form组件，没有form组件还是毕竟震惊

[Joahyan]

https://juejin.cn/post/6995804951754571813 我通常处理表单校验的方式，欢迎点赞

[kong-xb]

2023了，还没有form表单验证组件之类的，双向绑定啊

[forget1]

之前封装的表单验证Behavior

import { isString } from '../utils/util'
import Validator from '../libs/validator/index'
import { _ } from '../libs/index'

/**
 * 为组件添加表单能力
 * 生成getForm、validateForm方法
 * 
 * @example
 * 
 * //---- 如何在js里声明校验规则 ----//
 * 
 * import validationBehavior from 'path/to/behaviors/validation'
 * 
 * Component({
 *   behaviors: [
 *     validationBehavior
 *   ],
 *   form: {
 *     fields: ['phone', 'captcha'],
 *     validation: {
 *       phone: {
 *         // 添加校验规则时，参数为字符串表示使用个性化提示信息
 *         required: '请输入手机号',
 *         // 添加校验规则时，参数为true表示使用默认提示信息
 *         tel: true
 *       }
 *     }
 *   },
 *   
 *   submit(event) {
 *      const form = this.getForm()
 *      const [ valid, error ] = this.validate(form)
 * 
 *      if (!valid) {
 *        // 表单验证失败
 *        return
 *      }
 * 
 *      // 继续表单提交
 *   }
 * })
 * 
 */
module.exports = Behavior({
  properties: {
  },
  definitionFilter(defFields) {
    const formDef = defFields.form

    // 处理表单项
    const root = formDef.root
    const fields = defFields.form.fields

    defFields.methods.getForm = function() {
      const fields = defFields.form.fields || this.fields
      const formData = root ? _.get(this.data, root) : this.data
      return fields.reduce((form, field) => {
        form[field] = formData[field]
        return form
      }, {})
    }

    // 处理表单验证
    const validation = defFields.form.validation

    const __validator = validatorFactory(validation)

    function validatorFactory(validation) {
      if (!validation) {
        return null
      }

      const rules = {}
      const messages = {}

      Object.keys(validation).forEach(name => {
        const rule = validation[name]

        rules[name] = Object.keys(rule).reduce((rule, ruleName) => {
          rule[ruleName] = true
          return rule
        }, {})

        messages[name] = Object.keys(rule).reduce((message, ruleName) => {
          if (isString(rule[ruleName])) {
            message[ruleName] = rule[ruleName]
          } else {
  
          }
          return message
        }, {})
      })

      return new Validator(rules, messages)
    }

    defFields.methods.setValidator = function(validation) {
      this.validator = validatorFactory(validation)
    }

    defFields.methods.setFields = function(fields) {
      this.fields = fields
    }

    defFields.methods.getValidator = function() {
      return __validator || this.validator
    }

    defFields.methods.validate = function(form) {
      const validator = this.getValidator()
      const valid = validator.checkForm(form)
      const errors = validator.errorList

      if (!valid) {
        const errorData = errors.reduce((errors, error) => {
          errors[error.param] = error.msg
          return errors
        }, {})

        this.setData({
          errors: errorData
        })
      } else {
        this.setData({
          errors: {}
        })
      }

      return [valid, errors]
    }
  }
})