uniapp之自定义表单校验。

最近在开发uniapp的项目中，由于UI对于样式的要求，又不能使用组件库，修改半天还不如自己写表单样式。但好多模块都遇到表单校验的问题，一大堆if判断下来，代码丑陋不堪，不胜其烦。于是想着能不能像Element-UI的表单校验一样。在data中声明form和rules,果然可行。下面分享一下代码。

export default {
		data () {
			return {
                from: {
                    // ... 这里写自己的表单项。
                },
                rules: {
                    name: [
                        {
                             required: true,
                             message: '请输入名字'
                        },
                        {
                            pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/,
                            message: "名字请输入中文/英文"
                        },
                        {min: 2, message: '请输入正确的名字'},
                        {max: 10, message: '名字不能超过10个字符'},
                    ]
                }
            }
        },
        methods: {
            async submit() {
				await this.validate(this.form,this.rules);
			},
            validate(form, rules) {
				new Promise((resolve, reject) => {
					var aProps = Object.keys(rules)
					for(let i = 0; i < aProps.length; i++) {
						for(let j = 0; j < rules[aProps[i]].length; j++) {
							if(rules[aProps[i]][j].required && (!form[aProps[i]] || form[aProps[i]].trim() === '')) {
								uni.showToast({
									title: rules[aProps[i]][j].message,
									icon: 'none',
									duration: 2000,
								});
								resolve()
							}
							if(rules[aProps[i]][j].min || rules[aProps[i]][j].max) {
								const len = form[aProps[i]].length
								if(len < rules[aProps[i]][j].min || len > rules[aProps[i]][j].max) {
									uni.showToast({
										title: rules[aProps[i]][j].message,
										icon: 'none',
										duration: 2000,
									});
									resolve()
								}
							}
							if(rules[aProps[i]][j].pattern && form[aProps[i]]) {
								const regx = rules[aProps[i]][j].pattern
								if(!regx.test(form[aProps[i]])) {
									uni.showToast({
										title: rules[aProps[i]][j].message,
										icon: 'none',
										duration: 2000,
									});
									resolve()
								}
							}
						}
					}
					reject()
				})
			},
        },
}

我这里只写了必填、字符长度限制和自定义正则的校验。欢迎大家补充。