vue中rules下拉框验证,Vue表单验证
本文主要介绍了如何在vue中使用规则验证表单字段，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
:
目录
1.写入数据以验证表格内容数据2。编写内嵌表格内容3。引入外部定义的规则。在vue中有很多方法可以验证表单域。本文介绍了三种常用的验证方法。
1. 写在 data 中验证
表单内容
！-形式-
El-form ref= rules form :rules= form rules :model= rules form label-width= 200 px
El-form-item label=用户名：属性=用户名
El-input v-model= rules form . username style= width:300 px maxlength= 50 /
/El-表单-项目
/el格式
El-form:表示这是一个表单el-form-ref:引用时的表单名称，并标识el-form-rules:表单验证规则el-form-model:表单数据对象el-form-label-width:表单字段标签的宽度，表单的直接子元素Form-item将继承此值El-form-El-form-item:表单中的每个子元素el-form-item-label:标签文本el-form-item-prop:表单字段模型字段，当validate和reset字段
data 数据
data() {
返回{
//省略其他数据定义
.
//表单验证
表单规则：{
用户名：[
{必填：真，消息：请输入用户名，触发器：模糊 }
]
}
}
}
Formrules:与上述“表单内容”中el-form的rules属性值相同。用户名：与上面“表单内容”中el-form-item表单的子元素的属性相同。验证内容是:必需，在失去焦点时验证。如果为空，提示信息为“请输入用户名”
2. 写在行内
表单内容
！-形式-
El-form ref= rules form :rules= form rules :model= rules form label-width= 200 px
El-form-item label= Bank name: prop= account name :rules=[{ required:true，message:请输入银行名称，trigger:blur}]
El-input v-model= rules form . account name style= width:300 px maxlength= 50 /
/El-表单-项目
/el格式
El-form-item -rules:效果和第一种方法一样，只是写法不同，这里就不重复data 数据没有内容了。
3. 引入外部定义的规则
表单内容
！-形式-
El-form ref= rules form :rules= form rules :model= rules form label-width= 200 px
El-form-item label=银行卡号： prop=accountNumber
El-input v-model= rules form . account number style= width:300 px maxlength= 19 /
/El-表单-项目
/el格式
表格内容和第一种方式写的一样，这里就不赘述了。
script 内容
脚本
//引入外部验证规则
从“@/utils/validate”导入{ validate account number }；
//判断银行卡账号是否正确。
const validatorAccountNumber=(规则，值，回调)={
如果(！值){
返回回调(新错误(请输入账户信息))；
}否则{
if(validateAccountNumber(value)){
回调()；
}否则{
返回回调(新错误(“不正确的帐户格式”))
}
}
};
导出默认值{
data() {
返回{
//省略其他数据定义
.
//表单验证
表单规则：{
账号：[
{必需：true，验证器：validatorAccountNumber，触发器： blur}
]
}
}
}
}
/脚本
导入：首先引入外部验证规则const:定义一个规则常量，常量名称为变量，=(rule，value，callback)={} 为固定格式，value参数为验证formRules-accountNumber的字段值：在表单验证中，使用一个验证器来指定自定义验证规则validate.js的常量名称。
/*银行账户*/
导出函数validateAccountNumber(str) {
常量=/^([1-9]{1})(\d{14}\d{18})$/
返回注册测试(str)
}
验证规则
以上都是在失去焦点时的验证，下面来分析一下如何在表单提交时验证
1. 表单的提交按钮
！-表单-
El-form ref=规则表单:rules=表单规则:model=规则表单 label-width= 200 px
埃尔-表单-项目
El-button type= primary @ click= on submit( rules form )保存/el-button
el-button @click=取消取消/el-button
/El-表单-项目
/el格式
埃尔按钮：按钮埃尔按钮类型：按钮类型El-button-@点击：按钮点击时触发的事件，这里注意方法的入参为规则表单，这里要与埃尔格式表单的能量损耗率属性值一致2.methods 方法
方法：{
//保存
onSubmit(formName) {
这个参考文献[表单名]。验证（有效={
如果（有效){
console.log(成功提交！);
}否则{
console.log(错误提交！);
}
});
},
//取消
取消(){
}
}
这个参考文献[表单名]。验证：表单名称就是传入的规则表单，与埃尔格式表单的能量损耗率属性值一致，这样就指定好需要验证的表单了
完整示例代码如下
1.规则。某视频剪辑软件
模板
div class=应用程序容器
el-tabs v-model=activeName
el-tab-pane label=表单name= rulesPane @ tab-click= handle click
！-表单-
El-form ref=规则表单:rules=表单规则:model=规则表单 label-width= 200 px
El-表单-项目标签=用户名称： prop=userName
El-input v-model=规则形式。用户名 style= width:300 px maxlength= 50 /
/El-表单-项目
El-表单-项目标签=银行名称： prop= account name :rules=[{ required:true，message:请输入银行名称，触发器：模糊 }]
El-input v-model=规则形式。帐户名 style= width:300 px maxlength= 50 /
/El-表单-项目
El-表单-项目标签=银行卡号： prop=accountNumber
El-input v-model=规则形式。账号 style= width:300 px maxlength= 50 /
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= on submit( rules form )保存/el-button
el-button @click=取消取消/el-button
/El-表单-项目
/el格式
/El-选项卡-窗格
/el-tabs
/div
/模板
脚本
从" @/utils/validate "导入{验证帐号}；
//判断银行卡账户是否正确
const validatorAccountNumber=(规则，值，回调)={
如果(!值){
返回回调（新错误(请输入账户信息));
}否则{
if(validateAccountNumber(value)){
回调();
}否则{
返回回调（新错误(账号格式不正确))
}
}
};
导出默认值{
名称：规则，
data() {
返回{
活动名称： rulesPane ，
defaultProps: {
孩子："孩子",
标签:"标签"
},
规则表单：{
},
//表单验证
表单规则：{
用户名：[
{
必填：真，
消息： 请输入用户名称，
触发器："模糊"
}
],
账号：[
{
必填：真，
验证器：validatorAccountNumber
触发器："模糊"
}
],
}
};
},
已创建(){},
已安装(){},
方法：{
手柄单击（选项卡){
},
//取消
取消(){
},
//保存
onSubmit(formName) {
这个参考文献[表单名]。验证（有效={
如果（有效){
console.log(成功提交！);
}否则{
console.log(错误提交！);
返回错误的
}
});
}
}
};
/脚本
样式lang=scss
/风格
验证。射流研究…
/* 银行账户*/
导出函数validateAccountNumber(str) {
常量=/^([1-9]{1})(\d{14}\d{18})$/
返回注册测试(str)
}
效果图
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。