vue+elementUI实现表单校验

直接贴代码留作笔记

data() {
  var validateName = (rule, value, callback) => {
	//判断是否符合条件，调用callback回调
	if (value=== true) {
		callback(new Error("名称已经存在"));
	} else {
		callback();
	}
	  
  };

  return {
	createForm: {
	  name: "",
	  age: "",
	  desc: ""
	},
	rule: {
	  name: [
		{required: true, message: "请输入名称", trigger: "blur"},
		{min: 1, max: 50, message: "最大长度为50个字符", trigger: "blur"},
        //添加正则校验
		{
		  pattern: /^[a-zA-Z0-9]+[a-zA-Z0-9._-]*$/,
		  message: "名称不符合规范"
		},
        //添加方法校验
		{validator: validateName, trigger: "blur"}
	  ],
	  age: [
		{required: true, message: "请输入年龄", trigger: "blur"}
	  ],
	  desc: [
		{min: 1, max: 200, message: "最大长度为100个字符", trigger: "blur"}
	  ]
	}
  };
},