uniapp表单验证使用mixin

• 创建一个rulesMixin.js文件，全局安装mixin，代码如下

export default {
	install(Vue) {
		Vue.mixin({
			data() {
                return {}
            }		
		})
	}
}

• 在main.js文件中使用mixin，现在全局可以就可以使用mixin

import App from './App'
import module from "./ajax/api/index.js";
import userRulesMixin from "./common/rulesMixin.js"

Vue.use(userRulesMixin);
Vue.prototype.$http = module

• 将表单里面的规则写道rulesMixin.js，如果有其他表单验证就可以重复使用。表单字段名一定要与验证名一致。

下面是rulesMixin.js代码

export default {
	install(Vue) {
		Vue.mixin({
			data() {
				return {
					userRules: {
						loginName: {
							rules: [{
								required: true,
								"errorMessage": "账户名不能为空"
							}, {
								validateFunction: this.validateLoginName
							}]
						},
						passWord:{
							rules:[{
								required: true,
								"errorMessage": "密码不能为空"
							},{
								validateFunction: this.validatePassWord
							}]
						},
						phone:{
							rules:[{
								required: true,
								"errorMessage": "手机号不能为空"
							},{
								validateFunction: this.validatePhone
							}]
						},
						vCode:{
							rules:[{
								required: true,
								"errorMessage": "验证码不能为空"
							},{
								validateFunction: this.validateVcode
							}]
						}
					}
				}
			},
			methods: {
				//用户名验证函数
				validateLoginName(rule, val, data, callback) {
					// console.log(rule, val, data, callback)
					switch (true) {
						case val.length > 4:
							callback('用户名长度不能大于4')
							break;
						default:
							return true;
					}
				},
				validatePassWord(rule, val, data, callback){
					switch (true) {
						case val.length < 6:
							callback('密码长度不能小于6位')
							break;
						default:
							return true;
					}
				},
				validatePhone(rule, val, data, callback){
					switch (true) {
						case val.length < 11:
							callback('手机号不能小于11位')
							break;
						default:
							return true;
					}
				},
				validateVcode(rule, val, data, callback){
					return true
				}
			}
		})
	}
}

• 给登录按钮绑定点击事件，使用this.$refs.form.validate()获取字段值（方法是异步的），可以根据拿到值做后续操作。

• 验证效果展示