鍍金池/ 問(wèn)答/HTML/ vue,element-ui 表單驗(yàn)證出錯(cuò),value.getTime is n

vue,element-ui 表單驗(yàn)證出錯(cuò),value.getTime is not a function

效果如圖
圖片描述

現(xiàn)在問(wèn)題是,每次點(diǎn)擊提交之后,都會(huì)如下報(bào)錯(cuò):圖片描述

查了一遍之后,有一種說(shuō)法是el-date-picker本身支持字符串和date object兩種類型,但是json中的字符串綁定之后在效驗(yàn)時(shí)就不是date object,所以出現(xiàn)了異常。所以加上that.newForm.useTime=moment(that.newForm.useTime).toDate();進(jìn)行轉(zhuǎn)換可是還是報(bào)錯(cuò)。
代碼圖片和源碼如下,請(qǐng)大神指教,謝謝!
HTML:
圖片描述
rules:
圖片描述
js:
圖片描述
(忽略params里freeTime:that.newForm.useTime,少了一個(gè)newForm,修改的時(shí)候粗心了)
源碼:
html:

<el-button type="primary" icon="plus" @click="newDialogVisible = true">新增賬號(hào)</el-button>
            <el-dialog title="新增賬號(hào)" v-model="newDialogVisible"  @close="resetForm1('newForm')">
            <el-form :model="newForm"  :rules="rules1" ref="newForm" :label-width="formLabelWidth">
              <el-form-item label="廠家名稱" prop="nickName">
                <el-input v-model="newForm.nickName" auto-complete="off" style="width:70%;"></el-input>
              </el-form-item>
              <el-form-item label="賬號(hào)" prop="userAccount">
                <el-input v-model="newForm.userAccount" @blur="checkName" auto-complete="off" style="width:70%;"></el-input>
              </el-form-item>
              <el-form-item label="密碼" prop="userPasswd">
                <el-input v-model="newForm.userPasswd" auto-complete="off" style="width:70%;"></el-input>
              </el-form-item>
              <el-form-item label="實(shí)體店最大數(shù)量"prop="maxNumber">
                <el-input v-model.number="newForm.maxNumber" auto-complete="off" style="width:70%;"></el-input>
              </el-form-item>
              <el-form-item label="到期時(shí)間" prop="useTime">
                  <el-date-picker
                    v-model="newForm.useTime"
                    style="width:70%;"
                    type="date"
                    placeholder="選擇日期"
                   >
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="備注">
                <el-input v-model="newForm.remark" auto-complete="off" style="width:70%;"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addAcount('newForm')">保 存</el-button>
              <el-button @click="resetForm1('newForm')">取 消</el-button>
            </div>
          </el-dialog>

js:

  //添加
    addAcount:function(formName){
     let that = this     
     that.newForm.useTime=moment(that.newForm.useTime).format('YYYY-MM-DD');
     // alert(that.newForm.useTime)
     that.$refs[formName].validate((valid) => {
          if (valid) {
              // that.newForm.useTime=moment(that.newForm.useTime).toDate();
              that.$http.post(config.URL+'platform/user/add',
              {},
              {
              params:{
                 username:that.newForm.userAccount,
                 password:that.newForm.userPasswd,
                 nickname:that.newForm.nickName,
                 freeTime:that.newForm.useTime,
                 maxNumber:that.newForm.maxNumber,
                 remark:that.newForm.remark
               },
               emulateJSON:true
             })
            .then(
            function(res){
              if (res.body.code==1) {
                that.show();
                that.$refs[formName].resetFields();
                that.newDialogVisible = false
              }
              else{
                Message.error(res.body.statusMsg);
              }
            },
            function(err){
                Message.error('與服務(wù)器連接錯(cuò)誤!');             
            }) 
          } else {
            console.log('error submit!!');
            return false;
          }
        });
   },
回答
編輯回答
裸橙

圖片描述

只需要對(duì)應(yīng)的rule把那個(gè)type改回string 就行了

2017年2月27日 21:33
編輯回答
維她命

不用那么麻煩,我是這么解決的,<DatePicker type="date" placeholder="選擇日期" :value="item.value"></DatePicker>,這里用的是:value,對(duì)應(yīng)類型是string;如果用的是v-model,對(duì)應(yīng)類型是date。而我的驗(yàn)證規(guī)則是:rules='[{"message": "不能為空","required": 1},{"pattern": null,"type": "string","message": null}]',所以根據(jù)type類型寫value/v-model,完美通過(guò)驗(yàn)證!

2018年6月25日 06:38
編輯回答
尐飯團(tuán)

我剛在又看了一下,
你在<el-date-picker @input="change"></el-date-picker>添加一個(gè)事件@input,這個(gè)是可以保存that.newForm.useTime時(shí)間的,
change(){

        var d=new Date(value),
        year = d.getFullYear(),
        month = d.getMonth() + 1 >= 10 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1),
        date = d.getDate() >= 10 ? d.getDate() : '0' + d.getDate();
        that.newForm.useTime=year + '-' + month + '-' + date;

},然后你在你的保存事件里就可以直接用這個(gè)時(shí)間that.newForm.useTime

2018年3月25日 03:59
編輯回答
舊酒館

我感覺(jué)是你這邊少了.newForm導(dǎo)致的:
clipboard.png

2017年10月25日 14:02
編輯回答
初念

我是在從接口獲取時(shí)間后直接放在input中報(bào)錯(cuò),然后把時(shí)間放到new Date()中處理一下就不會(huì)報(bào)錯(cuò)了。

2017年1月20日 03:53
編輯回答
夏木

把that.newForm.useTime=moment(that.newForm.useTime).format('YYYY-MM-DD')寫在驗(yàn)證之后試試,因?yàn)闆](méi)有加這句轉(zhuǎn)換的話我這邊驗(yàn)證是沒(méi)問(wèn)題的

2017年2月1日 03:30
編輯回答
祈歡

請(qǐng)問(wèn)解決了么

2017年3月16日 22:42
編輯回答
有點(diǎn)壞

請(qǐng)問(wèn)這個(gè)問(wèn)題你解決了嗎

2017年2月6日 15:15
編輯回答
話寡

請(qǐng)問(wèn)這個(gè)問(wèn)題解決了嗎

2018年5月28日 09:11
編輯回答
初念
addAcount:function(formName){
     let that = this   
     // 此處因?yàn)閡seTime是一個(gè)時(shí)間戳,沒(méi)有 getTime 方法,故需要將其轉(zhuǎn)換為一個(gè)時(shí)間對(duì)象后,再去校驗(yàn)
     // 這樣就不會(huì)在再報(bào)錯(cuò)  
     that.newForm.useTime=new Date(that.newForm.useTime);
     that.$refs[formName].validate((valid) =>{})
2018年6月10日 20:01