element ui中el-form-item的属性rules的用法

目次

el-form-item的属性rules的用法
栗子 
总结 
实践应用
一、 定义静态的校验规则
二、定义动态的校验规则

---

el-form-item的属性rules的用法

在学习element ui 的Form表单组件时，学到el-form-item也有rules属性，但是对应这个属性如何使用，却一直用不对，百度查资料也没查到，
通过自己多方面测试，终于了解到了el-form-item也有rules属性的用法，现在总结分享给大家！
栗子 

表单域的验证规则：
        1.只有一条时，el-from-item 的属性rules绑定的变量的值为一个对象，对象中规定验证规则
        2.有多条时，el-from-item 的属性rules绑定的变量的值为一个对象数组，数组中的每一个对象元素都对应一条验证规则

---

总结 

在使用Element UI的el-form组件进行表单验证时，如果同时在el-form上绑定了rules，并且在单独的el-form-item上也绑定了rules，那么Element UI会将两者的规则合并使用。具体来说，对于同一个字段，如果el-form和el-form-item都有对应的验证规则，那么el-form-item上的规则会覆盖el-form上的规则。
这里是如何工作的：

• el-form的rules：这是表单级别的验证规则，适用于表单内所有字段。如果表单中的某个字段没有在el-form的rules中明白指定规则，那么它将不会进行验证。
  
• el-form-item的rules：这是字段级别的验证规则，只适用于绑定到该el-form-item的特定字段。如果字段在el-form的rules中也有规则，el-form-item中的规则将会覆盖表单级别的规则。
  

例如，如果有一个表单字段username，你在el-form上定义了一个规则，要求用户名至少为5个字符，然后在对应的el-form-item上定义了一个规则，要求用户名必须以"admin"开头，那么终极username字段的验证规则将是必须以"admin"开头。

1. // el-form的rules
2. {
3.   rules: {
4.     username: [
5.       { required: true, message: '用户名是必填项', trigger: 'blur' },
6.       { min: 5, message: '用户名至少为5个字符', trigger: 'blur' }
7.     ]
8.   }
9. }
11. // el-form-item的rules
12. <el-form-item prop="username">
13.   <el-input v-model="form.username"></el-input>
14.   <template slot="rules">
15.     [
16.       { validator: customValidator, trigger: 'blur' }
17.     ]
18.   </template>
19. </el-form-item>

复制代码

 
在这个例子中，customValidator是一个自定义的验证函数，它将检查用户名是否以"admin"开头。这个规则将覆盖el-form中对username字段的最小字符长度要求。
需要注意的是，合并规则时，el-form-item上的规则会优先应用，但是el-form上的规则仍旧可以为其他没有在el-form-item上定义规则的字段提供验证。
实践应用

一、 定义静态的校验规则

• 如template
  

1. <el-form
2. ref="condFormRef"
3. id="condForm"
4. :model="cond"
5. label-width="100px"
6. size="mini"
7. :rules="condFormRules"
8. >
10. <!-- rules 内嵌在el-form-item -->
11. <el-form-item label="名称：" prop="name" :rules="{required: true, message: '请输入名称', trigger:'blur'}">
12.     <el-input
13.     v-model="cond.name">
14.     </el-input>
15.   </el-form-item>
18. <el-form-item label="预算：" prop="budget">
19.    
20.     <el-input
21.     style="width:60%"
22.     v-model="cond.budget"
23.     maxlength="15"
24.     clearable>
25.     </el-input>
26.     <small>&nbsp;元</small>
27.   
28.   </el-form-item>
29. </el-form>

复制代码

• 在form 上定义上绑定 rules 属性， 给需要校验的item 增加prop 属性， prop 值需要个rules中的keys 保持同等
  

1. condFormRules:{
2.   budget:[//带prop的
3.     {required: true, message: '', trigger: ['blur','change']},
4.     {validator: validateBudget, trigger: 'blur'},
5.   ],
6. }

复制代码

 说明：
(1) required： 是否必填， true则显示红星星， 当设置了必填时， 必须有message, 哪怕为空，否则不填时给默认提示"budget is required"
   注意： 如{message: 'aaaaaaaa', trigger: ［"blur","change"］},  没有required，则会校验，但上次校验失败的信息不会主动消失， 即要有message时， 必须有required
  
  (2) trigger: 可选［"blur","change"］触发实验校验的变乱 blur：失去焦点时， change：数据改变时
  

1.      this.$refs.condFormRef.validate() 时，trigger都会执行

复制代码

(3) validator：自定义校验属性，可以定义自己的校验规则，如validateBudget自定义的规则函数, 校验逻辑复杂时可以自定义函数实现。
如下校验逻辑复杂的：要求数字且正整数或最多带两位的小数

1. var validateBudget=(rule, value, callback) => {
2.       if(!value || !Number(value)){ //不输入或输0.0或0.00时，都进入
3.         callback(new Error('请输入预算'));
4.       }
5.       else if(!(/(^[1-9]\d*(\.\d{1,2})?)$/.test(value) || /(^[0](\.\d{1,2}){1})$/.test(value))){
6.         callback(new Error('请输入正整数或最多带两位的小数'));
7.         
8.       }
9.       
10.       else{
11.         callback();
12.       }
13.     };

复制代码

 校验输入数字简单时，可以直接写在模板中, 如限定输入数字

1. <el-input
2.   style="width:60%"
3.   v-model="cond.budget"
4.   maxlength="15"
5.   @input="cond.budget = cond.budget.replace(/[^\d]/g, '')" //非数字的全局替换成空
6.   clearable>
7.   </el-input>

复制代码

二、定义动态的校验规则


当我们的表单项是动态天生的， 又需要对其进行输入值的校验， 怎么做呢？？？？？
比如添加一个用户信息，让其输入并校验

1. <el-col :span="6">
2.       <el-button @click="addInfo">添加学生信息</el-button>
3.       <el-form ref="testForm" :model="testModel" label-width="100px">
4.         <div
5.         style="border: 1px solid #000000"
6.         v-for="(info, index) of testModel.studentsInfos"
7.         :key="'info_'+index"
8.         >
9.           <el-form-item
10.           label="名字"
11.           :prop="'studentsInfos.' + index + '.name'"
12.           :rules="{required: true, message: '请输入名称', trigger:'blur'}"
13.           >
14.             <el-input v-model="info.name"></el-input>
15.           </el-form-item>
17.           <el-form-item
18.           label="年龄"
19.           :prop="'studentsInfos.' + index + '.age'"
20.           :rules="validateAge"
21.           >
22.             <el-input v-model="info.age"></el-input>
23.           </el-form-item>
25.           <el-form-item
26.           label="性别"
27.           :prop="'studentsInfos.' + index + '.sex'"
28.           :rules="{required: true, message: '请选择性别', trigger:'change'}"
29.           >
30.             <el-select v-model="info.sex">
31.               <el-option label="男" value="man"></el-option>
32.               <el-option label="女" value="women"></el-option>
33.             </el-select>
34.           </el-form-item>
36.         </div>        
37.         <el-form-item label="">
38.             <el-button @click="testSave">保存</el-button>
39.         </el-form-item>
40.       </el-form>
41.     </el-col>

复制代码

效果图如下

1. data() {
2.     return {
4.       testModel:{studentsInfos: []
5.       },
7.       validateAge: [
8.       {required: true, message: "请输入您的年龄", trigger: ['blur', 'change']},
9.       
10.       {validator: (rule, value, callback)=>{
11.         if(value&& !(/^\d+$/g).test(value)){
12.           callback(new Error("请输入数字"))
13.         }
14.         callback()
15.         }
16.       }
17.       ]
18. }

复制代码

 

1. methods: {
2.     addInfo(){
3.       this.testModel.studentsInfos.push({name: "", age: "", sex: ""})
4.     },
6.     testSave(){
7.       this.$refs['testForm'].validate((valid)=>{
8.         if(valid){
9.           console.log("校验通过， 可以保存了")
10.         }
11.         else{
12.           console.log("校验失败")
13.         }
14.       })
15.     },
16. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。