elementui 表单公共方法验证

做项目时会涉及到很多表单，前台的表单验证就必不可少，很多公共的验证，比如：手机号、日期、身份证等，一套写下来也很费时间，完全可以写个公共方法common去校验，.vue文件通过:rules='$rules.common'调用。

新建规则：common> rules>index.js

建议工程目录中创建common文件夹，存放公共调用的文件，比如验证方法。
用验证手机号举例：

const validatePhone = (rule, value, callback) => {
  let patter = new RegExp("^1[0-9]{10}$");//简单验证11位手机号
  if (!patter.test(value)) {
    return callback(new Error("请输入正确格式的手机号！"));
  } else {
    callback();//必须有此项回调，否则验证会一直不通过
  }
};
export default { 
	mobilePhone:[{
      required: true,
       message: "手机号不能为空"
     },{
       validator: validatePhone,
       trigger: "blur",
       message: "请输入正确的证件号"
     }]
}

上面的export default内可以分类填写验证，更便于管理，可以按照页面或者功能分类，看个人喜好了：

export default { 
	common:{//公共验证方法
		mobilePhone:[{
	      required: true,
	       message: "手机号不能为空"
	     },{
	       validator: validatePhone,
	       trigger: "blur"
	    }]
	},
	activity:{//活动策划表单验证
		name:[{
		   required: true,
	       message: "活动名称不能为空"
		},{
			//...
		}]
	},
	//更多...
}

挂载：main.js引入rules

import rules from "./common/rules";
Vue.prototype.$rules = rules;

挂载到vue上，这样我们就可以在单文件实例中通过$rules来调用需要的验证了。

*.vue 调用

验证form，注意prop、rules指定的名字需一致：

<el-form :model="loginForm.formData" :rules="$rules.common" ref="oform" label-width="50px">
	<el-form-item label="账号:" prop="mobilePhone" >
       <el-input type="text" placeholder="请输入手机号" v-model="oform.mobilePhone" auto-complete="off"></el-input>
    </el-form-item>              
    <el-button ref="submitBtn" type="primary" @click="submitForm('oform')">测试</el-button>
</el-form>

也可以单独指定具体某一验证：:rules="$rules.Login.userName"

<el-form-item label="账号:" prop="userName"  :rules="$rules.Login.userName" >
     <el-input type="text" placeholder="请输入您的身份证号" v-model="loginForm.userName" auto-complete="off"></el-input>
</el-form-item>

elementui表单验证的几种方法

这里可以看下总结的集中elementui表单验证的写法。