ElementUI form表单动态验证 #起因 最近在项目中遇到，当用户注册时，如果信息错误的话，需要根据后端返回的错误信息，显示在表单下面，在网上查找了很多解决方案，绝大多数动态校验，并不是真的动态校验，而是在已经确认几种错误信息的情况下，根据相应条件，显示对应的信息，这与我们的需求不同。 #实现原理 在官方文档Form表单在新窗口打开中，有写到Form-Item存在一个error插槽，这是自定义表单校验信息的显示方式，参数为 { error }，我们需要利用这个插槽显示我们定义好的变量信息。 #实现代码 假设我们有一个表单form，需要校验输入的账号name，账号的规则为字母数字下划线，且长度在5-20位之间，同时需在服务端进行重名检测。 html代码 html复制 <el-form ref="form" :model="form.data" :rules="form.rules" label-width="150px"> <el-form-item label="用户名" prop="name" ref="name"> <el-input type="text" v-model="form.data.name"></el-input> <!-- Error插槽 --> <span class="el-form-item__error" slot="error">{{form.dynamicError.name}}</span> </el-form-item> <el-form-item label="状态"> <label>{{form.data.status}}</label> </el-form-item> <el-form-item> <el-button type="primary" v-loading="loading" @click="submitForm">提交</el-button> </el-form-item> </el-form> 12345678910111213 vue结构代码 javascript复制 data() { return { loading: false, form: { dynamicError: { name: '' }, data: { name: '', status: '' }, rules: { name: [ { validator: (rule, value, callback) => { const validName = str => (/^[\da-zA-Z_]{5,20}$/).test(str) if (!value) { this.form.dynamicError.name = '请输入用户名' } else if (!validName(value)) { this.form.dynamicError.name = '格式错误，用户名由6-20位字母、数字、下划线组成' } else { this.form.dynamicError.name = '' // 需要手动移除is-error带来的错误信息边框 this.$refs.name.$el.classList.remove('is-error') } callback(this.form.dynamicError.name) }, trigger: 'change' } ] } } }; }, methods: { submitForm() { this.loading = true this.form.data.status = '提交中，请稍后' this.$refs.form.validate((valid) => { if (valid) { setTimeout(() => { this.loading = false if (Math.random() > 0.5) { this.form.data.status = '校验成功! 提交成功' } else { this.form.data.status = '校验成功，但未通过' this.form.dynamicError.name = '用户名已存在！' this.$refs.name.$el.classList.add('is-error') } }, 1000) } else { this.loading = false this.form.data.status = '校验未通过' } }); } } 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 #在线地址 　点击前往在新窗口打开

javascript将json数组转成tree对象 昨天遇到一道面试题，手写js将json数组转成tree对象，昨天写错了，今天特意想了下，思路其实挺简单，循环+递归，获取子节点对象。 javascript复制 let data = [ {'parent_id': 0, 'id': 1, 'value': 'XXX'}, {'parent_id': 1, 'id': 3, 'value': 'XXX'}, {'parent_id': 4, 'id': 6, 'value': 'XXX'}, {'parent_id': 3, 'id': 5, 'value': 'XXX'}, {'parent_id': 2, 'id': 4, 'value': 'XXX'}, {'parent_id': 1, 'id': 2, 'value': 'XXX'}, ] 12345678 主要方法如下，使用的是es6语法 javascript复制 let toTree = (arr, key = 'id', pkey = 'pid', children='children') => { if(arr.length === 0){ return {} } return getChildren(arr, 0) // 此处的0代表根节点，如有的根节点标识符为'#'，那么此处则为'#' 　　// 主要原理是通过查找父节点parent_id为pid的对象，再一层一层往下查找子节点id，看是否存在parent_id等于id的对象 function getChildren(arr, pid) { let temp = {} arr.forEach(v => { if(v[pkey] === pid){ temp[v[key]] = {} // 此处可根据相应需求作调整 if(Object.keys(getChildren(arr, v[key])).length !== 0){ // 如果存在子节点，此处也可将递归方法抽离出来，以减少代码量和操作 temp[v[key]][children] = getChildren(arr, v[key]) // 此处可根据相应需求作调整 } } }) return temp } } 1234567891011121314151617181920 测试数据 javascript复制 let tree = toTree(data) console.log(JSON.stringify(tree)) // 结果为： { "1": { "children": { "2": { "children": { "4": { "children": { "6": {} } } } }, "3": { "children": { "5": {} } } } } } 123456789101112131415161718192021222324

JavaScript获取浏览器屏幕宽高 javascript复制 function getInfo() { var s = ""; s += " 网页可见区域宽："+ document.body.clientWidth; s += " 网页可见区域高："+ document.body.clientHeight; //body s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"; s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"; s += " 网页正文全文宽："+ document.body.scrollWidth; s += " 网页正文全文高："+ document.body.scrollHeight; //窗口 s += " 网页被卷去的高(ff)："+ document.body.scrollTop; s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop; s += " 网页被卷去的左："+ document.body.scrollLeft; s += " 网页正文部分上："+ window.screenTop; s += " 网页正文部分左："+ window.screenLeft; s += " 屏幕分辨率的高："+ window.screen.height; s += " 屏幕分辨率的宽："+ window.screen.width; s += " 屏幕可用工作区高度："+ window.screen.availHeight; s += " 屏幕可用工作区宽度："+ window.screen.availWidth; s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; //alert (s); } getInfo(); 12345678910111213141516171819202122

url解析地址 javascript复制 function urlParse (search) { let index = search.lastIndexOf('?') let url = search.substr(index) || window.location.search let obj = {} let reg = /[?&][^?&]+=[^?&]+/g let arr = url.match(reg) if (arr) { arr.forEach((item) => { let tempArr = item.substring(1).split('=') let key = decodeURIComponent(tempArr[0]) let val = decodeURIComponent(tempArr[1]) obj[key] = val }) } return obj } // urlParse('https://www.baidu.com/index?a=1&b=3') // {a: "1", b: "3"} // urlParse() // f:"8",ie:"utf-8",oq:"substr",rqlang:"cn",……} 1234567891011121314151617181920

laypage实现方式 javascript复制 getData(id, dom, num, limit, function (d) { laypage.render({ elem: (dom.parents('.order-list')).get(0).querySelector('#page'),//dom元素 count: d.total, limit: limit, first: '首页', last: '尾页', prev: '<em><</em>', next: '<em>></em>', jump: function(obj, first){ getData(id, dom, obj.curr, obj.limit ); } }); }) function getData(id, dom, num, limit, cb) { $.ajax({ url: 'index/layorder?agentid='+ id +'&pagenum=' + num + '&limit=' + limit, type: 'get', data: '', dataType: 'json', success: function (d) { var data = d.row; var total = d.total; // 渲染方法 cb && cb(d); dom.html( laytpl(elemOrder).render(data) ); }, error: function (err) { } }) } 123456789101112131415161718192021222324252627282930313233