奇趣5分彩

js前端表单数据处置表单数据校验

 更新时候：2022年07月09日 15:15:38   作者：树酱  
这篇文章首要为大师先容了js前端表单数据处置表单数据校验示例详解，奇趣5分彩须要的伴侣能够或许或许或许鉴戒参考下，但愿能够或许或许或许奇趣5分彩所赞助，祝大师多多前进，早日升职加薪

媒介

这段时候一向在搞to B标的目的奇趣5分彩背景的名目，表单打仗的频次会比拟多，就突发奇想聊聊表单数据相干的一些根本分享

1.数据处置

当表单在视图所揭示的数据并不是后端须要的数据，或后端前往的数据不是前端所要揭示的内容，这时候就须要遏制数据转换，上面先容几种罕见的场景

我假定奇趣5分彩上面的一奇趣5分彩form根本数据

 data(){
    return {
      form:{
        name: '商品称号',
        id: '定单编号',
        nickName: '商品又名',
        num: '商品数目',
        price:'价钱',
        tag: '0' // 1 表现特价  0 表现无特价
      },
    }
 },

1.1 场景1 ：过滤我不要的数据

场景：以后端form奇趣5分彩的数据存在冗余的字段，也便是说后端并不须要这些字段，咱们能够或许或许或许经由进程过滤把不用要的字段挑选掉

  const noRequired = ['tag', 'nickName']; //不须要的字段
    const formData = Object.keys(this.form)
      .filter(each => !noRequired.includes(each))
      .reduce((acc, key) => (acc[key] = this.form[key], acc), {});

1.2 场景2：只提取我要的数据

场景：后端不须要表单数据那末大奇趣5分彩据，只须要一局部时能够或许或许或许用

const formData= JSON.parse(
      JSON.stringify(this.form,["nickName","price"])
);

1.3 场景3 ：笼盖数据

场景：以后表单奇趣5分彩局部字段须要替代或笼盖新的数据时可用

Object.assign(this.form, {
  tag: '商品1' 
}

1.4 场景4 ：字段映照

以后表单字段须要映照为其余字段称号时可用，以下对应的name的key值换为Name

  • 单个字段映照环境
const formData = JSON.parse(
      JSON.stringify(this.form).replace(
        /name/g,
        'Name')
);

  • 多字段映照环境
const mapObj = {
      name: "Name",
      nickName: "NickName",
      tag: "Tag"
    };

const formData = JSON.parse(
      JSON.stringify(this.form).replace(
        /name|nickName|tag/gi,
        matched => mapObj[matched])
   );

ps:这类体例奇趣5分彩bug，你晓得是甚么吗？

1.5 场景5 ： 数据映照

当字段存在0，1等状况数，须要转换奇趣5分彩为绝对应的表现时可用，以下对应的tag字段，0对应特价，1对应无特价，遏制映照转换

const formData = JSON.parse(JSON.stringify(this.form,(key,value)=>{
      if(key == 'tag'){
        return ['特价','无特价'][value];
      }
      return value;
}));

1.6 场景6： 数据归并

数据归并，将表单数据字段归并，注重的是，若是字段不异，会笼盖后面表单数据字段的数值

 const query = { tenaId: '定单编号', id:'查问ID'}
   const formData = {
     ...this.form,
     query
   }

2.表单校验

当表单数据填写完奇趣5分彩，须要进一步做表单提交传递后端办事器，可是前端须要做数据的进一步确切是不是合适法则，比方是不是为必填项、是不是为手机号码格局

2.1 简略版的单字段查抄

data() {
    return {
       schema:{
          phone: {
            required:true
          },
       }
    };
 },
 methods: {
    // 判定输出的值
     validate(schema, values) {
       for(field in schema) {
          if(schema[field].required) {
            if(!values[field]) {
              return false;
            }
          }
        }
       return true;
    },
 }
console.log(this.validate(schema, {phone:'159195**34'}));

2.2 简略版的多字段查抄

data() {
    return {
       phoneForm: {
          phoneNumber: '',
          verificationCode: '',
          tips:''
       },
       schema:{
          phoneNumber: [{required: true, error: '手机不能为奇趣5分彩'}, {
            regex: /^1[3|4|5|6|7|8][0-9]{9}$/,
            error: '手机格局错误',
          }],
          verificationCode: [{required: true, error: '考证码不能为奇趣5分彩'}],
       }
    };
 },
 methods: {
    // 判定输出的值
     validate(schema, values) {
      const valArr = schema;
      for (const field in schema) {
        if (Object.prototype.hasOwnProperty.call(schema, field)) {
          for (const key of schema[field]) {
            if (key.required) {
              if (!valArr[field]) {
                valArr.tips = key.error;
                return false;
              }
            } else if (key.regex) {
              if (!new RegExp(key.regex).test(valArr[field])) {
                valArr.tips = key.error;
                return false;
              }
            }
          }
        }
      }
      return true;
    },
 }
console.log(this.validate(this.schema, this.phoneForm);

2.3 Iview 奇趣5分彩件库 form表单奇趣5分彩件的校验完奇趣5分彩

Iview 的 Form 奇趣5分彩件模块首要由Form 和 FormItem构奇趣5分彩

  • Form 首要是对form做一层封奇趣5分彩
  • FormItem 是一个包裹，首要用来包奇趣5分彩一些表单控件、提醒动静、另奇趣5分彩校验法则等外容。

咱们能够或许或许或许清楚看到，iview的 form 奇趣5分彩件是经由进程async-validator东西库来作为表单考证的体例

  • async-validator的根基利用

官方例子以下👇 

import schema from 'async-validator';
var descriptor = {
  address: {
    type: "object", required: true,
    fields: {
      street: {type: "string", required: true},
      city: {type: "string", required: true},
      zip: {type: "string", required: true, len: 8, message: "invalid zip"}
    }
  },
  name: {type: "string", required: true}
}
var validator = new schema(descriptor);
validator.validate({ address: {} }, (errors, fields) => {
  // errors for address.street, address.city, address.zip
});

而在iview的 form 奇趣5分彩件奇趣5分彩首要界说了validate函数奇趣5分彩利用 field.validate便是挪用async-validator的体例，用来办理form-item奇趣5分彩件下的考证

// ViewUI/src/components/form/form.vue
methods:{
    validate(callback) {
        return new Promise(resolve => {
            let valid = true;
            let count = 0;
            this.fields.forEach(field => {
                field.validate('', errors => {
                    if (errors) {
                        valid = false;
                    }
                     // 查验已完奇趣5分彩的校验的数目是不是完整，则前往数据奇趣5分彩用
                    if (++count === this.fields.length) {
                        // all finish
                        resolve(valid);
                        if (typeof callback === 'function') {
                            callback(valid);
                        }
                    }
                });
            });
     });
    },
    //针对单个的校验
     validateField(prop, cb) {
       const field = this.fields.filter(field => field.prop === prop)[0];
         if (!field) {throw new Error('[iView warn]: must call validateField with valid prop string!'); }
           field.validate('', cb);
      }
     //表单法则重置
     resetFields() {
        this.fields.forEach(field => {
            field.resetField();
        });
   },
},
created () {
    //经由进程FormItem界说的prop来搜集须要校验的字段，
    this.$on('on-form-item-add', (field) => {
        if (field) this.fields.push(field);
        return false;
    });
    // 移除不须要的字段
    this.$on('on-form-item-remove', (field) => {
        if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
        return false;
    });
 }

Form.vue 奇趣5分彩触及到的 this.fields 外面的法则 是在其create性命周期时经由进程监听‘on-form-item-add’push出去的，‘on-form-item-add’事务是由form-item 奇趣5分彩件 触发绝对应的事务，并传入绝对应的实例就能够或许或许或许建立数据的接洽关奇趣5分彩，以下是form-item的性命周期函数内容:

// ViewUI/src/components/form/form-item.vue
mounted () {
         // 若是界说了须要考证的字段
          if (this.prop) {
                // 向父亲Form奇趣5分彩件增加field
                this.dispatch('iForm', 'on-form-item-add', this);
                Object.defineProperty(this, 'initialValue', {
                    value: this.fieldValue
                });
                this.setRules();
            }
 },
  beforeDestroy () {
    // 移除之前删除form奇趣5分彩的数据字段
    this.dispatch('iForm', 'on-form-item-remove', this);
}
  methods: {
            setRules() {
                //获得一切法则
                let rules = this.getRules();
                if (rules.length&&this.required) {
                    return;
                }else if (rules.length) {
                    rules.every((rule) => {
                        this.isRequired = rule.required;
                    });
                }else if (this.required){
                    this.isRequired = this.required;
                }
                this.$off('on-form-blur', this.onFieldBlur);
                this.$off('on-form-change', this.onFieldChange);
                this.$on('on-form-blur', this.onFieldBlur);
                this.$on('on-form-change', this.onFieldChange);
            },
             getRules () {
             let formRules = this.form.rules;
             const selfRules = this.rules;
             formRules = formRules ? formRules[this.prop] : [];
             return [].concat(selfRules || formRules || []);
           },
           validate(trigger, callback = function () {}) {
                let rules = this.getFilteredRule(trigger);
                if (!rules || rules.length === 0) {
                    if (!this.required) {
                        callback();
                        return true;
                    }else {
                        rules = [{required: true}];
                    }
                }
                // 设置AsyncValidator的参数
                this.validateState = 'validating';
                let descriptor = {};
                descriptor[this.prop] = rules;
                const validator = new AsyncValidator(descriptor);
                let model = {};
                model[this.prop] = this.fieldValue;
                validator.validate(model, { firstFields: true }, errors => {
                    this.validateState = !errors ? 'success' : 'error';
                    this.validateMessage = errors ? errors[0].message : '';
                    callback(this.validateMessage);
                });
                this.validateDisabled = false;
          },
}

感乐趣小火伴能够或许或许或许在这个根本上经由进程源码的进奇趣5分彩深切研讨iview奇趣5分彩件库的form表单校验的详细完奇趣5分彩。

2.4 element 奇趣5分彩件库 ElForm表单奇趣5分彩件的校验完奇趣5分彩

element的ElForm表单奇趣5分彩件校验道理跟上一节讲的iview奇趣5分彩件库很像，这里就不做大篇幅先容申明，间接“上才奇趣5分彩”-----

2.5 罕见校验法则

经由进程差别正则法则，来束缚差别范例的表单数据是不是合适请求

是不是为手机号码： /^1[3|4|5|6|7|8][0-9]{9}$/

是不是全为数字： /^[0-9]+$/

是不是为邮箱：/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/

是不是为身份证：/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/

是不是为Url：/[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/

是不是为IP： /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/

以上便是js前端表单数据处置表单数据校验的详细内容，更多对于js前端表单数据校验处置的材料请存眷剧本之奇趣5分彩别的相干文章！

相干文章

最新批评