详细说明元素界面中表单验证的其他注意事项

最近接触了大部分商家的后台项目，自然涉及到很多表单验证。

此外，还整理了一些常用的el-form表单验证和问题。

当我们添加所需的验证，输入一些数据并删除它时，会出现xxx是必需的，如下图所示

您可能想知道，表单的规则已经被传入，如果不是所有的规则都被删除，那么验证规则也没问题。出现此问题的原因是html中使用了必填字段，但规则中的规则没有将required设置为true。

//htmlel-form-item label=' role name ' required drop=' role name ' El-input v-model=' params。Role name '/El-input/El-form-item//js { trigger : ' blur '，Message: '需要角色名' }在这种情况下，输入框中会添加一个默认的验证规则，就会出现上图。

为了解决这种情况，我们只需要删除卸载html中的必填项，并将其移动到规则的规则中。

//js { required d : true，trigger:' blur '，message: '需要角色名' }级联提交表单验证。对于一些复杂的表单，我们经常会遇到提交之前需要对多个表单进行验证的情况。

元素的最后一个验证方法是异步的。

如果每个表单相互独立，我们不需要同步验证所有表单。

因此，您可以将每个独立的表单打包为一个Promise，然后使用Promise.all进行回调处理。

您可以使用async/await参考下面的vue代码。

//异步表单验证asynccvalidatedata(){ this . formvalidatepromiserr=[]this . formlist . map((form，index)={ this . validateeaachform(form，` form $ { index } `))})//如果所有验证都不成功，则输入错误处理尝试{await promise。all(this . formvalidatepromiserr)console . log(' finish ')this . next()} catch(error){ console . log(error)}。//验证每个独立的表单数据是否有效每个表单(表单，名称){让表单结果=newpromise ((resolve，Reject)={//获取要由ref验证的表单。$ refs [name] [0]。validate((有效)={if(有效){resolve ()} else {console.log(不完整的` $ {name} `)数据)reject()})}这。formvalidatepromiserr。push (formresult)}嵌套属性验证对于复杂的表单，我们不可避免地需要更深层次的验证。

对于明确知道要验证的嵌套属性，可以在定义规则对象时以字符串的形式指定要验证的属性，同事在prop中绑定相应的值。

//htmlel-form-item标签=' age information ' prop=' info . age ' El-input v-model=' form . info . age '/El-input/El-form-item//jsrule 3360 { name : [{ required d : true，trigger: 'blur '，message: 'required'}，' info . age ' 3:[{ required d 3: true，Trigger : ' blur '，message :

//html div v-for=' info in form . info list ' El-form-item label=' age information ' : prop=' ` info list[$ { index }]。年龄`。 rules=' rules . age ' El-input v-model=' info . age '/El-input/El-form-item/div//jsrules 3360 { age 3360 [{ required d 3360 true，trigger3360' blur '，message3360。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。