from表单实现vuex管理及表单校验

from结构：

<Field label="身份证号码" :value="form.idcard"
        @input="(val) => fieldChange('idcard', val)" placeholder="请输入身份证号码">
</Field>

form提交父组件

// 子组件
fieldChange (field, value) { 
this.$emit('formChange', { field, value }) 
}
// 父组件
<OrderForm @formChange="formChange" @sendCode="sendCode" @submitPassword="submitPassword" @getMobile="getMobile" :form="form" :name="order_info.name" :time_count="time_count" :send_loading="send_loading" :maskMobile='maskMobile' /> 
formChange (obj) { this.$store.commit(RE_FORM_CHANGE, obj) }

store数据管理

const mutations = {
  // 更新state数据
  [types.RE_UPDATE_STATE] (state, obj) {
    for (let item in obj) {
      state[item] = obj[item]
    }
  }

父组件获取store数据

computed: { ...mapState({ form: (state) => state.reset_password.form }), }

表单元素校验第一步，在vuex里state设置校验的类型及字段

const state = {
  form: {
    agentNo: '',
    password: '',
    confirmPassword: '',
    pingAnToken: '',
    verifyType: '手机号验证',
    verifyCode: ''
  },
  form_rules: {
    agentNo: [
      { required: true, message: '请输入业务员G码' },
      { type: 'agentNo' }
    ],
    password: [
      { required: true, message: '请输入新密码' },
      { type: 'password' }
    ],
    verifyCode: [
      { required: true, message: '请输入验证码' },
      { type: 'verifyCode' }
    ],
    valiCode: [
      { require: true, message: '请输入验证码' },
      { type: 'regx', pattern: '[0-9]{6}', message: '手机验证码格式不正确' }
    ]
  }
}

表单元素校验第二步，在vuex里action中form表单submit中校验

async poPayFormNext () { 
const { idcard, mobile, valiCode } = state.form 
const res = resultMerge(state.form, state.form_rules) 
if (res.result) { 
   校验成功
} else { 
校验失败
Toast(res.message)
}
},

表单元素校验第三步，引入resultMerge的js方法

      export const validate = (value, rules) => {
        if (rules && rules.length > 0) {
          for (let item of rules) {
            // 为空判断
              if (item.required) {
                if (value == '' || value == undefined) {
                  return { result: false, message: item.message ? item.message : '字段不能为空' }
                }
                if (Array.isArray(value) && value.length === 0) {
                  return { result: false, message: item.message ? item.message : '字段不能为空' }
                }
              }

              // 有效值进行判断，无效值如果没有 required 直接忽略
              if (Array.isArray(value) && value.length === 0) {
                return { result: true }
              } else if (value === null || value === undefined || value === '') {
                return { result: true }
              }

                // 验证数字
              if (item.type === 'number') {
                const regx = /^\\d+(\\.\\d+)?$/
                if (!regx.test(value)) {
                  return { result: false, message: item.message ? item.message : '字段只能为数字' }
                }
              }

          }
          return {
            result: true,
          };
        } else {
          return {
            result: true,
          };
        }
      };
      export const resultMerge = (form, rules) => {
        for (let item in form) {
          if (item === "_gradeCodeFlag") {
            console.log("===============", rules[item][0]);
          }
          const obj = validate(form[item], rules[item]);
          if (!obj.result) {
            return obj;
          }
        }
        return { result: true };
      };