本文实例为大家分享了vue表单验证自定义验证规则，供大家参考，具体内容如下
这是公司里Vue Element UI的项目。写的验证规则放图：
样式代码：
<div class="info" v-if="openslist">
<h2 class="info-h">情况反馈表</h2>
<el-form ref="stateForm" :model="stateForm" class="stateforms" :rules="rules">
<el-row type="flex" class="row-bg">
<el-col :span="12">
<el-form-item label="听取意见方式" class="stateform" prop="way">
<el-select v-model="stateForm.way" placeholder="请选择" @change="getReturn()">
<el-option label="面复" value="1"></el-option>
<el-option label="电话" value="2"></el-option>
<el-option label="座谈" value="3"></el-option>
<el-option label="未联系" value="4"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-select v-model="stateForm.attitude" placeholder="请选择" @change="getReturn()">
<el-option label="好" value="1"></el-option>
<el-option label="较好" value="2"></el-option>
<el-option label="一般" value="3"></el-option>
<el-option label="较差" value="4"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" @click="onSubmit('stateForm')" style="margin: 20px 0 0 80px;position: initial;">提交</el-button>
</el-form-item>
</el-form>
</div>js代码:
data(){
return{
rules:{
way:[
{ required: true, message: '请输入听取意见方式', trigger: 'change' }
],
attitude:[
{ required: true, message: '请输入人员态度', trigger: 'change' }
]
}
}
}记住form表单一定要“:rules=“rules（自己定义）””，下面是自定义规则，放图：
样式代码：
<el-form label-width="100px" class="passstyle" :model="Formname" :rules="editFormPwd" ref="Formname">
<el-form-item label="用户名：">
<!--<el-input style="width:50%" clearable></el-input>-->
<span style="width:50%" class="passSpan" >{{username}}</span>
</el-form-item>
<el-form-item label="原密码：" prop="oldpwd" >
<el-input style="width:50%" clearable v-model="Formname.oldpwd" type="password">
</el-input>
</el-form-item>
<el-form-item label="新密码：" prop="newpwd">
<el-input style="width:50%" clearable v-model="Formname.newpwd" type="password"></el-input>
</el-form-item>
<el-form-item label="确认密码：" prop="newpwds">
<el-input style="width:50%" clearable v-model="Formname.newpwds" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="subpass('Formname')">提交</el-button>
</el-form-item>
</el-form>js代码:
data(){
//这里是自定义的规则
var newpwdmin=(rule, value, callback)=>{
if(!value){
return callback(new Error('请输入密码'));
}else if(value !==this.Formname.newpwd){
return callback(new Error('两次输入密码不一致!'));
}else {
callback()
}
}
return{
editFormPwd:{
oldpwd:[{ required: true, message: '请输入原密码', trigger: 'blur'}],
newpwd:[{ required: true, message: '请输入密码', trigger: 'blur' },],
newpwds:[{ required: true,validator: newpwdmin, trigger: 'blur'}],
}
}
}提交返回什么就不写了；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。