代码片段:
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;
代码片段:在代码片段中版本库不能使用2.9.3,这个版本输入框输入事件不会触发
https://developers.weixin.qq.com/s/Ku7Daamt70dh