评论

输入框全匹配输入事件与输入框全匹配正则校验事件

一个“inpuAll”事件决绝使用输入框的输入事件, 一个“blurAll”事件决绝使用输入框的数据校验事件,​

代码片段:

https://developers.weixin.qq.com/s/Ku7Daamt70dh

在代码片段中版本库不能使用2.9.3,这个版本输入框输入事件不会触发,修改2.9.2OK


一个“inpuAll”事件决绝使用输入框的输入事件,

一个“blurAll事件决绝使用输入框的数据校验事件,

就是这么简单


例:index

    

<input type="text" bindblur="blurAll" bindinput="inpuAll" data-key="name" value="{{user.name}}"></input>

<input type="number" maxlength="11" bindblur="blurAll" disabled="true" bindinput="inpuAll" data-key="phone" value="{{user.phone}}"></input>

数组型:

<view class="itemData">

<text class="{{!(userRegular.familyMember[idx].phone.regular)?'errorText':''}}">联系电话:</text>

<input type="number" bindblur="blurAll" maxlength="11" bindinput="inpuAll" data-key="familyMember[{{idx}}].phone" value="{{item.phone}}"></input>

</view>


inpuAll: function(e) {
  var user = app.util.inpuAll(this_.data.user, e);    //不可传整个data,否则每次返回数据都会刷新整个页面,页面上的组件会发生赋值事件
  if (user) {
    this_.setData({
      user: user
    });
  }
},


blurAll: function(e) {

  var userRegular = app.util.blurAll(this_.data.userRegular, e);
  if (userRegular) {
    this_.setData({
      userRegular: userRegular
    });
  }

},

    user: {
      name: '', //  姓名

      phone: '',      

     array:[]

    },
    userRegular: {
      name: {
        type: 'name',    //正则表达式类型,请参考regular.js
        regular: true,
        error: '请正确输入用户名!'
      },
      phone: {
        type: 'phone',
        regular: true,
        error: '请正确输入手机号!'

      }

     array:[]

    }

表单提交前:

regularAll_: function (obj) {
  var regularTem = app.util.regularAll(obj);
  if (!(regularTem.regular)) {
    this_.setError(regularTem.error);
  }
  return regularTem.regular;
},
regularDataAll: function () {
  try{
    var userRegular = app.util.regularDataAll(this_.data.userRegular);
    this_.setData({ userRegular: userRegular });
  }catch(e){
    console.log(e);
  }
},
regularAll_: function (obj) {
  var regularTem = app.util.regularAll(obj);
  if (!(regularTem.regular)) {
    this_.setError(regularTem.error);
  }
  return regularTem.regular;
},
regularAll: function() {
  return this_.regularAll_(this_.data.userRegular);
},


表单提交,请求服务器:

submi: function () {
  this_.regularDataAll();
  if (!this_.regularAll()) {
    console.log(this.data.userRegular);
    return ;
  }

  console.log('数据校验通过');

}

使用数据校验组必须包含两个属性

userRegular.cooperative.regular = app.regular.emptyAttr(cooperative, 'name');
userRegular.cooperative.value = cooperative.name;

如果是自定义事件:

app.js

import initiResize from 'utils/initiResize.js';
import regular from 'utils/regular.js';
import util from 'utils/util.js';
var this_;
App({
  debug:false,
  /**
   * 根据模板布局大小动态计算用户手机布局相对大小
   */
  resize: initiResize,
  /**
   * 正则表达式
   */
  regular: regular,
  userId:'',
  util: util,
  onLaunch: function () {
    this_ = this;
    util.app = this;
    util.initi();

util.js

import regular from 'regular.js';
let this_;
module.exports = {
  initi:function(){  //在app.js中初始化
    this_=this;
  },
  /**
   *  全局输入框通用事件
   *  添加以下两个属性
   *  bindinput="inpuAll"
   *  data-key="user.name"
   *
   *  obj为Page的data
   *   Page(data:{
   *      user:{name:''}
   *   })
   *  e为最初的输入事件参数
   
   * 最后返回data
   *
   * 示例:
   *
   * <input data-key="user.name" bindinput="inpuAll" value="{{user.name}}"></input>
   * Page(
   *   data:{
   *      user:{name:''}
   *   },
   *   inpuAll: function (e) {
   *    var data=util.inpuAll(this.data,e);
   *    if (data){
   *      this.setData(data);
   *    }
   *  }
   * )
   * 示例数组:data-key="user.members[{{idx}}].identity"
   *  data-key="user.members[{{idx}}][{{idx}}].identity"(多维数组没有测试,算法理论上是可以的)
   *
   *  假如提高页面渲染效率:
   *  inpuAll: function (e) {
   *    var xx=util.inpuAll(this.data.XX,e);
   *    if (xx){
   *      this.setData({XX:xx});
   *    }
   *  }
   */
  inpuAll: function (obj, e) {
    try{
      var tag = e.currentTarget.dataset.key;
      var tems = this.keySplit(tag);
      var objt = obj;
      for (var i = 0; i < tems.length; i++) {
        var key = tems[i];
        if (this.isArray(key)) {
          var names = this.getArray(key);
          var indexs = this.getArrayIndexs(key);
          obj = obj[names];
          for (var p = 0; p < indexs.length; p++) {
            if (i == (tems.length - 1) && p == indexs.length - 1) {
              obj[(indexs[p])] = e.detail.value;
            } else {
              obj = obj[(indexs[p])];
            }
          }
        } else {
          if (i == (tems.length - 1)) {
            obj[key] = e.detail.value;
          } else {
            obj = obj[key];
          }
        }
      }
      return objt;
    } catch (e) {
      console.log(e);
      return obj;
    }
  },
  keySplit: function (e) {
    return e.split(".");
  },
  isArray: function (e) {
    var i = e.indexOf("[");
    return i > 0;
  },
  getArray: function (e) {
    return e.substring(0, e.indexOf("["));
  },
  getArrayIndexs: function (e) {
    var t = [];
    var l = 0;
    var ks = e.split("[");
    for (var i = 0; i < ks.length; i++) {
      var k = ks[i].substring(0, ks[i].length - 1);
      if (regular.number(k)) {
        t[l++] = new Number(k).valueOf();
      }
    }
    return t;
  },
  /**
   * 数据校验组的支持
   *  <input type="number" bindblur="blurAll"  data-key="name" value="{{nameData.name}}"></input>
   * Page({
    * blurAll: function(e) {    //失去焦点事件
        var userRegular = util.blurAll(this.data.nameData, e);
        if (userRegular) {
          this.setData({
            userRegular: userRegular
          });
        }
      }
    })
   * nameData:{
   *  name:'',
   *  arrs:[]
   * }
   *
   * regularCopy:{
      name: {
        type: 'empty',  //正则表达式类型,请参考regular.js
        regular: true,
        error: '请正确输入用户名!'
      },
      arrs:[]
    }
   */
  blurAll: function (regularObj, e){
    var regularTem = regularObj;
    var tag = e.currentTarget.dataset.key;
    var tems = this.keySplit(tag);
    for (var i = 0; i < tems.length; i++) {
      var key = tems[i];
      if (this.isArray(key)) {
        var names = this.getArray(key);
        var indexs = this.getArrayIndexs(key);
        regularTem = regularObj[names];
        for (var p = 0; p < indexs.length; p++) {
          if (i == (tems.length - 1) && p == indexs.length - 1) {
            var type = (regularTem[(indexs[p])]).type;
            var regularVal=(regular[type])(e.detail.value);
            (regularTem[(indexs[p])]).regular = regularVal;
            (regularTem[(indexs[p])]).value = e.detail.value;
          } else {
            regularTem = regularTem[(indexs[p])];
          }
        }
      } else {
        if (i == (tems.length - 1)) {
          var type = (regularTem[key]).type;
          var regularVal = (regular[type])(e.detail.value);
          (regularTem[key]).regular = regularVal;
          (regularTem[key]).value = e.detail.value;
        } else {
          regularTem = regularTem[key];
        }
      }
    }
    return regularObj;
  },
  /**
   *  检验regularObj数据校验组中是否有不通过的数据
   * Regular: {
      name: {
        type: 'empty',  //正则表达式类型,请参考regular.js
        regular: true,
        error: '请正确输入用户名!'
      },
      arrs:[]
    }
   */
  regularAll:function(obj){
    var temobj={
      regular: true,
      error: ''
    };
    for (var prop in obj){
      if (regular.attr(obj[prop],'regular')){
        if (!((obj[prop]).regular)){
          temobj.regular = false;
          temobj.error = obj[prop].error;
          return temobj;
        }
        continue;
      }
      if (regular.isArray(obj[prop])) {
        var tem = this.regularArray(obj[prop]);
       if (!(tem.regular)){
         temobj.regular = tem.regular;
         temobj.error = tem.error;
         return temobj;
        }
        continue;
      }
      var tem = this.regularAll(obj[prop]);
      if (!(tem.regular)) {
        temobj.regular = tem.regular;
        temobj.error = tem.error;
        return temobj;
      }
    }
    return temobj;
  },
  regularArray: function (obj) {
    var temobj = {
      regular: true,
      error: ''
    };
    for (var i = 0; i < obj.length;i++){
      var prop = obj[i];
      if (regular.isArray(prop)) {
        var tem = this.regularArray(prop);
        if (!(tem.regular)) {
          temobj.regular = tem.regular;
          temobj.error = tem.error;
          return temobj;
        }
      }else{
        var tem = this.regularAll(prop);
        if (!(tem.regular)) {
          temobj.regular = tem.regular;
          temobj.error = tem.error;
          return temobj;
        }
      }
    }
    return temobj;
  },
  /**
   *  检验regularObj数据校验组中所有数据
   */
  regularDataAll: function (obj) {
    for (var prop in obj) {
      if (regular.attr(obj[prop], 'regular')) {
        var type = (obj[prop]).type;
        if (regular.attr(obj[prop],'value')){
          var regularVal = (regular[type])((obj[prop]).value);
          (obj[prop]).regular = regularVal;
        }else{
          (obj[prop]).regular = false;
        }
        continue;
      }
      if (regular.isArray(obj[prop])) {
        var tem = this.regularDataArray(obj[prop]);
        obj[prop] = tem;
      }else{
        var tem = this.regularDataAll(obj[prop]);
        obj[prop] = tem;
      }
    }
    return obj;
  },
  regularDataArray: function (obj) {
    for (var i = 0; i < obj.length; i++) {
      var prop = obj[i];
      if (regular.isArray(prop)) {
        obj[i]= this.regularDataArray(prop);
      } else {
        obj[i] = this.regularDataAll(prop);
      }
    }
    return obj;
  },
  /**
   * 从nameData中初始化regular数据校验组中的数据
   * nameData:{
   *  name:'',
   *  arrs:[]
   * }
   *
   * regularCopy:{
      name: {
        type: 'empty',  //正则表达式类型,请参考regular.js
        regular: true,
        error: '请正确输入用户名!'
      },
      arrs:[]
    }
   */
  regularDataCopy: function (nameData, regularCopy) {
    for (var prop in regularCopy) {
      try {
        if (regular.attr(regularCopy[prop], 'regular')) {
          regularCopy[prop].value = nameData[prop];
          if (regular.empty(nameData[prop])){
            var type = regularCopy[prop].type;
            var regularVal = (regular[type])(nameData[prop]);
            regularCopy[prop].regular = regularVal;
          }
          continue;
        }
        if (regular.isArray(regularCopy[prop])) {
          var tem = this.regularDataCopyArray(nameData[prop], regularCopy[prop]);
          regularCopy[prop] = tem;
        } else {
          var tem = this.regularDataCopy(nameData[prop], regularCopy[prop]);
          regularCopy[prop] = tem;
        }
      } catch (error){
        console.log(error);
      }
    }
    return regularCopy;
  },
  regularDataCopyArray: function (nameData, regularCopy) {
    var tem;
    for (var i = 0; i < nameData.length; i++) {
      if (i == 0) {
        tem = regularCopy[0];
      }
      var prop = regularCopy[i];
      if (!prop) {
        prop = tem;
      }
      if (regular.isArray(prop)) {
        regularCopy[i] = this.regularDataCopyArray(nameData[i], prop);
      } else {
        regularCopy[i] = this.regularDataCopy(nameData[i], prop);
      }
    }
    return regularCopy;
  }
}


正则校验:regular.js

/**
 *  小程序所有的正则表达式以及数据正则校验
 */
module.exports = {
  number: function (e) {
    var t = /^\d+$/;
    return t.test(e);
  },
  phone: function (e) {
    /**
     * 手机号
     */
    var t = /^0?1(3|4|5|6|7|8|9)\d{9}$/;
    return t.test(e);
  },
  /**
   * 中文
   */
  chinese: function (e) {
    var t = /^[\u4e00-\u9fa5]+$/;
    return t.test(e);
  },
  /**
   * 中文名字
   */
  name: function (e) {
    var t = /^[\u4e00-\u9fa5]{2,8}$/;
    return t.test(e);
  },
  password: function (e) {
    /**
     * 密码
     */
    var t = /^[A-Za-z0-9]{6,16}$/;
    return t.test(e);
  },
  phoneCode: function (e) {
    /**
     * 验证码
     */
    var t = /^(\w|\d){4,4}$/;
    return t.test(e);
  },
  /**
   * 空
   */
  empty: function (e) {
    var is = e ? true : false;
    if (is && this.isString(e)) {
      e = e.trim();
      is = e ? true : false;
    }
    return is;
  },
  emptyAttr: function (e, key) {
    var is = this.attr(e, key);
    if (is) {
      is = this.empty(e[key]);
    }
    return is;
  },
  attr: function (e, key) {
    var is = e ? true : false;
    if (this.isString(e)) {
      return false;
    }
    if (this.isArray(e)) {
      return false;
    }
    is = this.isObject(e);
    if (is) {
      is = key in e;
    }
    return is;
  },
  object: function (e) {
    var is = e ? true : false;
    return is;
  },
  /**
   * 身份证号15位与18位
   */
  idCard: function (e) {
    var t = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/;
    return t.test(e);
  },
  isPositiveInteger: function (e) {
    var t = /^[1-9][0-9]*$/;
    return t.test(e);
  },
  isString: function (e) {
    var bool = true;
    try {
      bool = e instanceof String;
    } catch (e) {
      bool = false;
    }
    if (!bool) {
      try {
        var str = typeof e;
        bool = ("string" == str);
      } catch (e) {
        bool = false;
      }
    }
    return bool;
  },
  isArray: function (e) {
    var bool = true;
    try {
      bool = e instanceof Array;
    } catch (e) {
      bool = false;
    }
    if (!bool) {
      try {
        var str = typeof e;
        bool = ("array" == str);
      } catch (e) {
        bool = false;
      }
    }
    if (bool) {
      bool = e.length > 0;
    }
    return bool;
  },
  isObject: function (e) {
    var bool = true;
    try {
      bool = e instanceof Object;
    } catch (e) {
      bool = false;
    }
    if (!bool) {
      try {
        var str = typeof e;
        bool = ("object" == str);
      } catch (e) {
        bool = false;
      }
    }
    return bool;
  },
  isBoolean: function (e) {
    var bool = true;
    try {
      bool = e instanceof Boolean;
    } catch (e) {
      bool = false;
    }
    if (!bool) {
      try {
        var str = typeof e;
        bool = ("boolean" == str);
      } catch (e) {
        bool = false;
      }
    }
    return bool;
  },
  isNumber: function (e) {
    var bool = true;
    try {
      bool = e instanceof Number;
    } catch (e) {
      bool = false;
    }
    if (!bool) {
      try {
        var str = typeof e;
        bool = ("number" == str);
      } catch (e) {
        bool = false;
      }
    }
    return bool;
  }
}


最后一次编辑于  11-26  
点赞 0
收藏
评论

1 个评论