输入框全匹配输入事件与输入框全匹配正则校验事件
发布于 5 年前 作者 qiangding 2112 次浏览 来自 分享

代码片段:

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

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

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

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

就是这么简单

例:index

 

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

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

数组型:

viewclass"itemData">

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

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

</view

inpuAll: function(e) {

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

  if(user) {

    this_.setData({

      user: user

    });

 

},

blurAll: function(e) {

  varuserRegular = 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) {

  varregularTem = app.util.regularAll(obj);

  if(!(regularTem.regular)) {

    this_.setError(regularTem.error);

 

  returnregularTem.regular;

},

regularDataAll: function() {

  try

    varuserRegular = app.util.regularDataAll(this_.data.userRegular);

    this_.setData({ userRegular: userRegular });

  catch(e){

    console.log(e);

 

},

regularAll_: function(obj) {

  varregularTem = app.util.regularAll(obj);

  if(!(regularTem.regular)) {

    this_.setError(regularTem.error);

 

  returnregularTem.regular;

},

regularAll: function() {

  returnthis_.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’

varthis_;

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

      vartag = e.currentTarget.dataset.key;

      vartems = this.keySplit(tag);

      varobjt = obj;

      forvari = 0; i < tems.length; i++) {

        varkey = tems[i];

        ifthis.isArray(key)) {

          varnames = this.getArray(key);

          varindexs = this.getArrayIndexs(key);

          obj = obj[names];

          forvarp = 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];

   

      returnobjt;

    } catch(e) {

      console.log(e);

      returnobj;

 

  },

  keySplit: function(e) {

    returne.split(".");

  },

  isArray: function(e) {

    vari = e.indexOf("[");

    returni > 0;

  },

  getArray: function(e) {

    returne.substring(0, e.indexOf("["));

  },

  getArrayIndexs: function(e) {

    vart = [];

    varl = 0;

    varks = e.split("[");

    forvari = 0; i < ks.length; i++) {

      vark = ks[i].substring(0, ks[i].length - 1);

      if(regular.number(k)) {

        t[l++] = newNumber(k).valueOf();

  

    returnt;

  },

  /**

   * 数据校验组的支持

   *  <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){

    varregularTem = regularObj;

    vartag = e.currentTarget.dataset.key;

    vartems = this.keySplit(tag);

    forvari = 0; i < tems.length; i++) {

      varkey = tems[i];

      ifthis.isArray(key)) {

        varnames = this.getArray(key);

        varindexs = this.getArrayIndexs(key);

        regularTem = regularObj[names];

        forvarp = 0; p < indexs.length; p++) {

          if(i == (tems.length - 1) && p == indexs.length - 1) {

            vartype = (regularTem[(indexs[p])]).type;

            varregularVal=(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)) {

          vartype = (regularTem[key]).type;

          varregularVal = (regular[type])(e.detail.value);

          (regularTem[key]).regular = regularVal;

          (regularTem[key]).value = e.detail.value;

        } else

          regularTem = regularTem[key];

   

    returnregularObj;

  },

  /**

   *  检验regularObj数据校验组中是否有不通过的数据

   * Regular: {

      name: {

        type: ‘empty’,  //正则表达式类型,请参考regular.js

        regular: true,

        error: ‘请正确输入用户名!’

      },

      arrs:[]

 

   */

  regularAll:function(obj){

    vartemobj={

      regular: true

      error: ‘’

    };

    forvarprop inobj){

      if(regular.attr(obj[prop],‘regular’)){

        if(!((obj[prop]).regular)){

          temobj.regular = false

          temobj.error = obj[prop].error;

          returntemobj;

 

        continue

 

      if(regular.isArray(obj[prop])) {

        vartem = this.regularArray(obj[prop]);

       if(!(tem.regular)){

         temobj.regular = tem.regular;

         temobj.error = tem.error;

         returntemobj;

 

        continue

 

      vartem = this.regularAll(obj[prop]);

      if(!(tem.regular)) {

        temobj.regular = tem.regular;

        temobj.error = tem.error;

        returntemobj;

  

    returntemobj;

  },

  regularArray: function(obj) {

    vartemobj = {

      regular: true

      error: ‘’

    };

    forvari = 0; i < obj.length;i++){

      varprop = obj[i];

      if(regular.isArray(prop)) {

        vartem = this.regularArray(prop);

        if(!(tem.regular)) {

          temobj.regular = tem.regular;

          temobj.error = tem.error;

          returntemobj;

 

      else

        vartem = this.regularAll(prop);

        if(!(tem.regular)) {

          temobj.regular = tem.regular;

          temobj.error = tem.error;

          returntemobj;

   

    returntemobj;

  },

  /**

   *  检验regularObj数据校验组中所有数据

   */

  regularDataAll: function(obj) {

    forvarprop inobj) {

      if(regular.attr(obj[prop], ‘regular’)) {

        vartype = (obj[prop]).type;

        if(regular.attr(obj[prop],‘value’)){

          varregularVal = (regular[type])((obj[prop]).value);

          (obj[prop]).regular = regularVal;

        else

          (obj[prop]).regular = false

 

        continue

 

      if(regular.isArray(obj[prop])) {

        vartem = this.regularDataArray(obj[prop]);

        obj[prop] = tem;

      else

        vartem = this.regularDataAll(obj[prop]);

        obj[prop] = tem;

  

    returnobj;

  },

  regularDataArray: function(obj) {

    forvari = 0; i < obj.length; i++) {

      varprop = obj[i];

      if(regular.isArray(prop)) {

        obj[i]= this.regularDataArray(prop);

      } else

        obj[i] = this.regularDataAll(prop);

  

    returnobj;

  },

  /**

   * 从nameData中初始化regular数据校验组中的数据

   * nameData:{

   *  name:’’,

   *  arrs:[]

   * }

   *

   * regularCopy:{

      name: {

        type: ‘empty’,  //正则表达式类型,请参考regular.js

        regular: true,

        error: ‘请正确输入用户名!’

      },

      arrs:[]

 

   */

  regularDataCopy: function(nameData, regularCopy) {

    forvarprop inregularCopy) {

      try

        if(regular.attr(regularCopy[prop], ‘regular’)) {

          regularCopy[prop].value = nameData[prop];

          if(regular.empty(nameData[prop])){

            vartype = regularCopy[prop].type;

            varregularVal = (regular[type])(nameData[prop]);

            regularCopy[prop].regular = regularVal;

 

          continue

 

        if(regular.isArray(regularCopy[prop])) {

          vartem = this.regularDataCopyArray(nameData[prop], regularCopy[prop]);

          regularCopy[prop] = tem;

        } else

          vartem = this.regularDataCopy(nameData[prop], regularCopy[prop]);

          regularCopy[prop] = tem;

 

      } catch(error){

        console.log(error);

  

    returnregularCopy;

  },

  regularDataCopyArray: function(nameData, regularCopy) {

    vartem;

    forvari = 0; i < nameData.length; i++) {

      if(i == 0) {

        tem = regularCopy[0];

 

      varprop = 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);

  

    returnregularCopy;

 

正则校验:regular.js

/**

*  小程序所有的正则表达式以及数据正则校验

*/

module.exports = {

  number: function(e) {

    vart = /^\d+$/;

    returnt.test(e);

  },

  phone: function(e) {

    /**

     * 手机号

     */

    vart = /^0?1(3|4|5|6|7|8|9)\d{9}$/;

    returnt.test(e);

  },

  /**

   * 中文

   */

  chinese: function(e) {

    vart = /^[\u4e00-\u9fa5]+$/;

    returnt.test(e);

  },

  /**

   * 中文名字

   */

  name: function(e) {

    vart = /^[\u4e00-\u9fa5]{2,8}$/;

    returnt.test(e);

  },

  password: function(e) {

    /**

     * 密码

     */

    vart = /^[A-Za-z0-9]{6,16}$/;

    returnt.test(e);

  },

  phoneCode: function(e) {

    /**

     * 验证码

     */

    vart = /^(\w|\d){4,4}$/;

    returnt.test(e);

  },

  /**

   * 空

   */

  empty: function(e) {

    varis = e ? true: false

    if(is && this.isString(e)) {

      e = e.trim();

      is = e ? true: false

 

    returnis;

  },

  emptyAttr: function(e, key) {

    varis = this.attr(e, key);

    if(is) {

      is = this.empty(e[key]);

 

    returnis;

  },

  attr: function(e, key) {

    varis = e ? true: false

    ifthis.isString(e)) {

      returnfalse

 

    ifthis.isArray(e)) {

      returnfalse

 

    is = this.isObject(e);

    if(is) {

      is = key ine;

 

    returnis;

  },

  object: function(e) {

    varis = e ? true: false

    returnis;

  },

  /**

   * 身份证号15位与18位

   */

  idCard: function(e) {

    vart = /(^[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]$)/;

    returnt.test(e);

  },

  isPositiveInteger: function(e) {

    vart = /^[1-9][0-9]*$/;

    returnt.test(e);

  },

  isString: function(e) {

    varbool = true

    try

      bool = e instanceofString;

    } catch(e) {

      bool = false

 

    if(!bool) {

      try

        varstr = typeofe;

        bool = (“string”== str);

      } catch(e) {

        bool = false

  

    returnbool;

  },

  isArray: function(e) {

    varbool = true

    try

      bool = e instanceofArray;

    } catch(e) {

      bool = false

 

    if(!bool) {

      try

        varstr = typeofe;

        bool = (“array”== str);

      } catch(e) {

        bool = false

  

    if(bool) {

      bool = e.length > 0;

 

    returnbool;

  },

  isObject: function(e) {

    varbool = true

    try

      bool = e instanceofObject;

    } catch(e) {

      bool = false

 

    if(!bool) {

      try

        varstr = typeofe;

        bool = (“object”== str);

      } catch(e) {

        bool = false

  

    returnbool;

  },

  isBoolean: function(e) {

    varbool = true

    try

      bool = e instanceofBoolean;

    } catch(e) {

      bool = false

 

    if(!bool) {

      try

        varstr = typeofe;

        bool = (“boolean”== str);

      } catch(e) {

        bool = false

  

    returnbool;

  },

  isNumber: function(e) {

    varbool = true

    try

      bool = e instanceofNumber;

    } catch(e) {

      bool = false

 

    if(!bool) {

      try

        varstr = typeofe;

        bool = (“number”== str);

      } catch(e) {

        bool = false

  

    returnbool;

 

1 回复

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

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

回到顶部