elementui表单校验规则,el-form 表单验证
本文主要详细介绍了Vue基本形式的验证。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
表单验证是前端开发过程中最常用的功能之一。本文结合个人工作经验，总结了表单验证功能的基本用法。
下面是form的演示。
El-form:model= dynamicValidateForm ref= dynamicValidateForm label-width= 100px class= demo-dynamic
El-表单-项目
prop=电子邮件
Label=“邮箱”
:rules=[
{必填：真，消息：请输入您的电子邮件地址，触发器：模糊 }，
{类型：电子邮件，消息：请输入正确的电子邮件地址，触发器：[模糊，更改]}
]
El-input v-model= dynamicvalidateform . email /El-input
/El-表单-项目
El-表单-项目
dynamicValidateForm.domains 中的v-for=(domain，index)
:label= 域名索引
:key=domain.key
:prop= 域。索引。值“”
:规则={
必填项：true，消息：“域名不能为空”，触发器：“模糊”
}
El-input v-model= domain . value /El-input El-button @ click . prevent= remove domain(domain) delete/El-button
/El-表单-项目
El-表单-项目
El-button type= primary @ click= submit form( dynamic validate form ) submit/El-button
El-button @click=addDomain 添加新域名/el-button
El-button @ click= reset form( dynamic validate form ) reset/El-button
/El-表单-项目
/el格式
脚本
导出默认值{
data() {
返回{
dynamicValidateForm: {
域：[{
值：“”
}],
电子邮件：“”
}
};
},
方法：{
submitForm(formName) {
这个。$ refs[表单名]。验证((有效)={
如果(有效){
alert(提交！);
}否则{
console.log(错误提交！);
返回false
}
});
},
resetForm(formName) {
这个。$ refs[表单名]。resetFields()；
},
removeDomain(item) {
var index=this . dynamicvalidateform . domains . index of(item)
如果(索引！==-1) {
this . dynamicvalidateform . domains . splice(index，1)
}
},
addDomain() {
this . dynamicvalidateform . domains . push({
值： ，
key: Date.now()
});
}
}
}
/脚本
首先，解释el-form标签中的几个关键属性。
ref:当前表单的唯一ID
model: 表单绑定对象
rules: 字段验证规则
规则字段用于定义每个字段的具体校验规则。使用方法请参考开头的演示示例，其中required标识该字段是否为必填项，message为验证提示，trigger为单次验证触发模式。您还可以通过validator字段自定义验证规则。在validateProductName方法中，商品名的名称称为空判断和长度验证。需要注意的是，所有的条件分支都必须是回调的，否则验证可能会导致异常。
1、重置表单
将窗体重置方法称为。$ refs . dynamicvalidateform . resetfields()来实现它。
当然，像datetimerange这样的日期控件不能用此方法重置，绑定字段必须手动重置。
2、 清除校验提示语
将此方法称为。$ refs . dynamicvalidateform . clear validate()来实现它。
如果只需要清除单个控件的提示，只需将控件对应的prop属性值作为参数传入即可。
另一种方法是在控件对应的el-form-item标签中添加ref属性的值，然后调用clearValidate方法。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。