本文实例为大家分享了Vue表单验证自定义验证规则,供大家参考,具体内容如下 这是公司里Vue+Element UI的项目。写的验证规则放图: 样式代码: <div class
本文实例为大家分享了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'}],
}
}
}
提交返回什么就不写了;
--结束END--
本文标题: vue表单验证自定义验证规则详解
本文链接: https://www.lsjlt.com/news/143183.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0