vue+element 表單

1.驗證手機號/電話/身份證

//html
<el-form :model="newForm" status-icon :rules="newRules" ref="newForm" label-width="100px">
 <el-Row>
    <el-Col :span='24'>
      <el-form-item label="機構電話" prop="orgMobile" size="small">
        <el-input v-model.number="newForm.orgMobile" style="width:208px" :disabled='isLook' clearable></el-input>
      </el-form-item>
    </el-Col>
    <el-Col :span='12'>
      <el-form-item label="負責人手機" prop="managerMobile" size="small">
        <el-input v-model.number="newForm.managerMobile" clearable></el-input>
      </el-form-item>
    </el-Col>
    <el-Col :span='12'>
      <el-form-item label="身份證" prop="cardId" size="small">
        <el-input v-model.number="newForm.cardId" clearable></el-input>
      </el-form-item>
    </el-Col>
  </el-Row>

  <el-form-item class="tr">
    <el-button @click="dialogNewVisible = false" size="small">取 消</el-button>
    <el-button type="primary" @click="submitNewForm('newForm')" size="small">提交</el-button>
  </el-form-item>
</el-form>

// export default上面
var checkTel = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('電話不能爲空'));
    }
    setTimeout(() => {
      if (!Number.isInteger(value)) {
        callback(new Error('請輸入數字值'));
      } else {
        callback();
      }
    }, 1000);
  };
 var checkPhone = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('手機不能爲空'));
    }
    let regIdPhone = /^1\d{10}$/; 
    setTimeout(()=>{
      if(!regIdPhone.test(value)){
        callback(new Error('手機格式錯誤'));
      }else{
        callback()
      }
    },1000)
  };
  //身份證
  var checkCardId = (rule, value, callback) => {
	  if (!value) {
	    return callback(new Error('身份證不能爲空'));
	  }
	  let regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/; 
	  if(!regIdCard.test(value)){
	    callback(new Error('身份證格式錯誤'));
	  }else{
	    callback();
	  }
	};
	//身份證-爲空非必選-有值驗證格式
	var checkCardId = (rule, value, callback) => {
	  if (value) {
	    let regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/; 
	    if(!regIdCard.test(value)){
	     callback(new Error('身份證格式錯誤'));
	    }else{
	     callback();
	    }
	  }else{
	    callback();
	  }
	};
//data
newForm:{
  loading:false,
  dialogNewVisible:false,
  orgMobile:'',
  managerMobile:'',
  cardId:''
},
newRules: {
  orgMobile:[{ required: true,validator:checkTel, trigger: 'blur'}],
  managerMobile:[{ required: true,validator:checkPhone, trigger: 'blur'}],
  cardId: [{ validator: checkCardId, trigger: 'change' }],
}

//方法
submitNewForm(formName){ //新增提交
  this.$refs[formName].validate((valid) => {
    if (valid) {
      let data ={
        ...this.newForm
      }
      this.$axios.post(this.$my.api + '/xxx', data).then(res => { 
          if(res.data&&res.data.code === 200){       
              this.loading = false;
              this.dialogNewVisible = false
              this.$message({
                  message: res.data.message,
                  type: 'success',
                  duration: 1500
              })
              //...this.formInline 搜索條件,新增完跟新列表數據
              this.getList({...this.formInline})
              this.$refs[formName].resetFields();
          }else{
              this.loading = false
              this.dialogNewVisible = false
              this.$message({
                  message: res.data.message,
                  type: 'error',
                  duration: 1500
              })
              return false
          } 
      }).catch(function (error) {
        this.loading = false
      })
    } else {
      console.log('error submit!!');
      return false;
    }
  });
},

2.模糊搜索

//html
<el-form size="small" :model="workForm" ref="workForm" :rules='workFormRules' label-position="top" class='clear'>
  <el-form-item label="患者名稱：" prop='patientId'>
    <el-select 
      v-model="workForm.patientId" 
      clearable 
      placeholder="請選擇" 
      filterable 
      remote 
      :remote-method="getPatient" 
      :loading="loading">
      <el-option
        v-for="item in patientOptions"
        :key="item.id"
        :label="item.patientName"
        :value="item.id"
        >
      </el-option>
    </el-select>
  </el-form-item>
  <el-row class="fr mb10" type="flex" justify="start">
   <el-button type="primary" class="mr10" @click.stop="submit('workForm')" size="small" icon="el-icon-check">提交</el-button>
   <el-button type="info" size="small" icon="el-icon-close">取消</el-button>
  </el-row>
</el-form>

//data
patientOptions:[],
workForm:{
	patientId: '',
}
workFormRules:{
	patientId:[{ required: true,message: '請選擇', trigger: 'blur'}],
}

//methods
 getPatient(val){
  if(val){
    this.loading = true;
    let data = {
      projectId:this.$route.query.proId,
      rows:20,
      page:1,
      patientName:val
    }
    this.$axios.post(this.$api + 'patient/getPatientList',data).then(res => { 
        if(res.data&&res.data.code === 200){    
          this.patientOptions = res.data.data.rows
        }else{
            this.$message({
                message: res.data.message,
                type: 'error',
                duration: 1500
            })
        } 
        this.loading = false;
    }).catch(function (error) {})
  }else{
    this.patientOptions = []
  }
},

3.多選

//html
<el-form-item label="處理人：">
	//allow-create 把用輸入當作選項
   <el-select v-model="workForm.dealEmployeeId" clearable placeholder="請選擇" multiple filterable style='width:350px'>
     <el-option
       v-for="item in dealEmployeeOptions"
       :key="item.id"
       :label="item.name"
       :value="item.id">
     </el-option>
   </el-select>
 </el-form-item>
 
 //data
 dealEmployeeId:[],

4.日期選擇

//html
<el-form-item label="要求完成時間：">
  <el-date-picker
    v-model="workForm.shouldFinishTime"
    :picker-options="pickerOptions" 
    type="date"
    placeholder="選擇日期">
  </el-date-picker>
</el-form-item>

<el-form-item label="填報日期:">
  <el-date-picker
    v-model="date"
    @change="setDate"
    size="small"
    type="daterange"
    value-format='yyyy-MM-dd'
    range-separator="至"
    start-placeholder="開始日期"
    end-placeholder="結束日期">
  </el-date-picker>
</el-form-item>

//data
workForm:{
	shouldFinishTime: '',
},

date:[],
form1:{
   startDate:'',
   endDate:'',
 }
 
pickerOptions: {
  disabledDate(time) {
    return time.getTime() < Date.now() - 8.64e7;//當天之後的時間可選
  },
},

setDate(date){
 if(date){
   this.form1.startDate = date[0]
   this.form1.endDate = date[1]
 }else{
   this.formInline.startDate = ''
   this.formInline.endDate = ''
 }
},

5.三級聯動

//html
<el-form :model="newForm" status-icon :rules="newRules" ref="newForm" label-width="100px">
   <el-Row>
     <el-Col :span='24'>
       <el-form-item label="省份：" prop="provinceId" size="small">
         <el-select v-model.number="newForm.provinceId" @change="provinceChange">
           <el-option :label="item.name" :value="item.id" v-for="(item,index) in provincesArr" :key="index"></el-option>
         </el-select>
       </el-form-item>
     </el-Col>
     <el-Col :span='24'>
       <el-form-item label='城市：' prop="cityId" size="small">
         <el-select v-model.number="newForm.cityId" @change="cityChange">
           <el-option :label="item.name" :value="item.id" v-for="(item,index) in cityArr" :key="index"></el-option>
         </el-select>
       </el-form-item>
     </el-Col>
     <el-Col :span='24'>
       <el-form-item label="藥房：" prop="name" size="small">
         <el-input v-model="newForm.name" clearable></el-input>
       </el-form-item>
     </el-Col>
   </el-Row>

   <div class="tr">
     <el-button @click="dialogNewVisible = false" size="small">取 消</el-button>
     <el-button type="primary" @click="submitNewForm('newForm')" size="small">提交</el-button>
   </div>
 </el-form>
 
 //data
 newForm:{
   provinceId:'',
   provinceName:'',
   cityId:'',
   cityName:'',   
   name:'', 
 },
 newRules: {
   provinceId: [{ required: true, message: '請選擇', trigger: 'change'}],
   cityId:[{ required: true, message: '請選擇',trigger: 'blur'}],
   name:[{ required: true, message: '請輸入', trigger: 'blur'}]
 },
 dialogNewVisible:false,
 provincesArr:[],
 cityArr:[]
 
//created 
created () {
  this.getPro()
},
//methods
getPro(){
   let that = this
   this.$axios.get(this.$my.api+'/bms/basePharmacy/getAllList')
     .then(res => {
       if(res.data&&res.data.code == 200){
         this.provincesArr= res.data.data
         that.getCityList(res.data.data[0].code)
       }else{
         that.$message({
             message: res.data.message,
             type: 'error',
             duration: 1500
         })
       }
     }, response => {console.log("error");})
 },
 getCityList(code){
   let that = this
   this.$axios.get(this.$my.api+'/bms/basePharmacy/getListByProCode?provinceCode='+code)
     .then(res => {
       if(res.data&&res.data.code == 200){
         this.cityArr = res.data.data
       }else{
         that.$message({
             message: res.data.message,
             type: 'error',
             duration: 1500
         })
       }
     }, response => {console.log("error");});
 },
 provinceChange(val){   
   let current = this.provincesArr.find(item=>item.id == val)
   this.newForm.cityId = ''
   this.newForm.cityName = ''
   this.newForm.provinceId = val
   this.newForm.provinceName = current.name
   this.getCityList(current.code)
 },
 cityChange(val){   
   let current = this.cityArr.find(item=>item.id == val)
   this.newForm.cityId = val
   this.newForm.cityName = current.name
 },

備註：方便我自己複製粘貼 —2019/10/23