如图，验证功能点名称，长度1-20并且是数字和字母的组合。

长度是1-20，这个很好办，直接 el-form表单上添加 :rules="rules" ， 添加个 ref="ruleForm" ，下面提交的时候好识别 ， prop="powerName"  就是对应的规则的名称了

<el-form :model="form" :rules="rules" ref="ruleForm"><el-form-item label="功能点名称 *" prop="powerName" :label-width="formLabelWidth"><el-input v-model="form.powerName"type="text"placeholder="请填写功能点名称(1-20位,数字或字母或两者的组合)"></el-input></el-form-item><el-form-item label="功能点描述 *" prop="description" :label-width="formLabelWidth"><el-inputtype="text"autosizeplaceholder="请填写功能点描述(1-10位)"v-model="form.description"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary"@click='enSure("ruleForm")'>确 定</el-button></div>

然后对应的 js 里面添加规则 ，（这里只例举个简单的，具体的请移步官方），当 required: true 的时候，前面会自动带上红色的小星星，提示是必填的

rules: {powerName: [{ required: true, message: '请输入功能点名称', trigger: 'blur' },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],description: [{ required: true, message: '请输入功能点描述', trigger: 'blur' },{ min: 1, max: 20, message: '长度在 1 到 10 个字符', trigger: 'blur' }],},

然后提交的方法这么写，就行了

enSure(powerName){console.log('this.form==',this.form);this.$refs[powerName].validate((valid) => {if (valid){console.log(this.form.powerName);} else {console.log('error submit!!');return false;}});},

但是我们还想要 数字和字母的组合，这种私人订制的官方里面可没有哇，这时候我们就得自定义，正则和element自带验证规则结合起来用了

首先，在咱们需要验证的地方，添加   { validator: validateName, trigger: 'blur' }  ， validator 这就是告诉代码，这里要自定义了，自定义验证的规则的名字叫做 validateName ， 一共有三个参数，rule, value, callback，打印一下就知道是啥了

var validateName = (rule, value, callback) => {console.log('rule',rule);console.log('value',value);var patt1 = /^[A-Za-z0-9]+$/;console.log('============',value.match(patt1));if (!value.match(patt1)){callback(new Error('请输入数字或字母或两者的组合'));} else{callback();}};

如有不足，欢迎指出 ^ - ^