vue输入验证码自动验证,vue表单验证不起作用
这篇文章主要为大家详细介绍了某视频剪辑软件表单验证自定义验证规则，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件表单验证自定义验证规则，供大家参考，具体内容如下
这是公司里某视频剪辑软件元素用户界面的项目。写的验证规则放图：
样式代码：
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-表单-项目标签=听取意见方式stateform prop=way
El-select v-model= stateform。方式 placeholder=请选择@change=getReturn()
埃尔选项标签=面复value=1/el-option
埃尔选项标签=电话value=2/el-option
埃尔选项标签=座谈value=3/el-option
埃尔选项标签=未联系value=4/el-option
/el-select
/El-表单-项目
/el-col
el-col :span=12
El-select v-model= stateform。态度 placeholder=请选择@change=getReturn()
埃尔选项标签=好value=1/el-option
埃尔选项标签=较好value=2/el-option
埃尔选项标签=一般value=3/el-option
埃尔选项标签=较差value=4/el-option
/el-select
/El-表单-项目
/el-col
/el-row
埃尔-表单-项目
El-button type= primary @ click= on submit( stateForm ) style= margin:20px 0 0 80px；位置：初始；提交/el-button
/El-表单-项目
/el格式
/div
射流研究…代码：
data(){
返回{
规则：{
方式：[
{必需：真，消息： 请输入听取意见方式，触发器：更改 }
],
态度：[
{必需：真，消息： 请输入人员态度，触发器：更改 }
]
}
}
}
记住形式表单一定要":规则="规则（自己定义)"",下面是自定义规则，放图：
样式代码：
El-form label-width= 100px class= pass style :model= Formname :rules= editFormPwd ref= Formname
El-表单-项目标签=用户名：
！-El-input style= width:50% clearable/El-input-
span style= width:50% class= pass span { username } }/span
/El-表单-项目
El-表单-项目标签=原密码： prop=oldpwd
El-input style= width:50% clearable v-model= formname。旧密码 type= password
/el-input
/El-表单-项目
El-表单-项目标签=新密码： prop=newpwd
El-input style= width:50% clearable v-model= formname。新密码 type= password /El-input
/El-表单-项目
El-表单-项目标签=确认密码： prop=newpwds
El-input style= width:50% clearable v-model= formname。新密码类型=密码/El-输入
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= subpass( Formname )提交/el-button
/El-表单-项目
/el格式
射流研究…代码：
data(){
//这里是自定义的规则
var newpwdmin=(规则，值，回调)={
如果(!值){
返回回调（新错误(请输入密码));
}else if(值！==这个. Formname.newpwd){
返回回调（新错误(两次输入密码不一致!));
}否则{
回调()
}
}
返回{
editFormPwd:{
旧密码：[{必填：真的，消息： 请输入原密码，触发器：模糊 }],
新密码：[{必填：真的，消息： 请输入密码，触发器：模糊 },],
newpwds:[{ required: true，validator: newpwdmin，trigger: blur}]，
}
}
}
提交返回什么就不写了；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。