vue表单验证

(1) el-form下

:model="formLabelAlign"

:rules="rules"

ref="formLabelAlign"

(2)el-form-item 下

prop="operatorId"

注意prop值与v-model值v-model="formLabelAlign.operatorId"一致

(3)点击按钮下

@click = submit(formLabelAlign) 传的是ref值

(4)data下

rules:{

operatorId:[

{required: true, message:'请选择运营商'}

],

注意operatorId为prop值

}

(5)methods下

submit(formName){

this.$refs[formName].validate((valid) =>{

if(valid){

alert(11)

}}}

（6）外部引用的正则

import {validEmail} from '@/utils/validate.js'

// 判断邮箱是否正确

const validE = (rule, value, callback) => {

if (!value) {

return callback(new Error("邮箱不能为空"));

} else {

if (validEmail(value)) { 这里的值与引入的值一致

callback();

} else {

return callback(new Error('邮箱格式需正确'))

}

}

};

email:[ {required: true, validator:validE,trigger:'blur'} ]

（7）正则验证（写在import下，export default的外层不然会报错）

const validUser = (rule,value,callback) =>{

const pattern = /^a-zA-Z*$/

if(!value){

return callback(new Error('输入不能为空'))

}else if(pattern.test(value)){

callback()

}else{

return callback(new Error('需以字母开头,可包含字母,数字,下划线'))

}

(8)重置校验规则(防止打开后仍然有有红字校验)

this.$refs['a'].resetFields() a为ref值