自定义filter提示重复

背景

• 是一个可以循环增加的表单，当添加相同的内容时，提示重复；
• 首先写一个如何可以添加的表单；
• key的作用是代表这条数据的唯一性标识；
• Vue中为v-for提供了一个属性，
  • key，在写v-for的时候，都需要给元素加上一个key属性;
  • 这个key属性必须是唯一的标识，并且给key赋值的内容不能是可变的。
  • 是一个for循环

<el-form ref="form" :model="form">
<div v-for="(item,index) in form.contacts" :key="index">
   <div class="contact-title">

<h3>{{`联系人${index+1}`}}</h3>

<el-button class="small-delete"  type="danger" plain size="small"  icon="el-icon-delete"  @click="deleteContact(item, index)">
</el-button>
   </div>
</div>
<el-row>
<el-col :span="12">
<el-form-item label="姓名">
  <el-input label=" 联系人" v-model="item.name" placeholder="请输入姓名" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
    label="手机号"
    :prop="'contacts['+ index +'].phoneNum'"
    :rules="[
        {required:true,message:'请输入手机号'，trigger：'blur'},
        {pattern:/^1[3/4/5/6/7/8/9/][0-9]\d{8}$/,message:'请输入正确的手机号'，trigger:'blur'},
         {validator:validateContactPhone,trigger:'blur'}
           ]"
>
<el-input v-model="item.phoneNum" placeholder="请输入手机号" />
</el-form-item>
</el-col>
</el-row>
</el-form>

当输入相同的手机号时validateContactPhone就会起作用

validateContactPhone(rule, value, callback) {
   const { form } = this
   if (form.contacts.filter(item => item.phoneNum === value).length > 1) {
   callback(new Error('相同的手机号码'))
   } else {
	  callback()
	}
   },

手机号验证以及自定义验证手机号是否重复输入

手机号验证

• 可以直接写现成的方法

:rules="[        {required:true,message:'请输入手机号'，trigger：'blur'},        {pattern:/^1[3/4/5/6/7/8/9/][0-9]\d{8}$/,message:'请输入正确的手机号'，trigger:'blur'},
           ]"

自定义验证

• 可以直接把自定义的内容加在其他验证的后面；

 :rules="[        {required:true,message:'请输入手机号'，trigger：'blur'},        {pattern:/^1[3/4/5/6/7/8/9/][0-9]\d{8}$/,message:'请输入正确的手机号'，trigger:'blur'},
         {validator:validateContactPhone,trigger:'blur'}
           ]"

• 因为验证的内容较多，所以写了一个方法validator:validateContactPhone,；
• 自定义的内容在validateContactPhone方法里面；

validateContactPhone(rule, value, callback) {
   const { form } = this
   if (form.contacts.filter(item => item.phoneNum === value).length > 1) {
callback(new Error('相同的手机号码'))
} else {
	callback()
	}
		},

这个写法可以参考elementUI里面的表单验证自定义的的做法