關於form表單校驗問題,prop綁定的的名字必須和v-model綁定的名字一致


校驗規則寫在vue中的data函數里的return中
 
自定義校驗規則寫到data函數內return外面
 data() {
      // 校驗手機號
       var validtelephone = (rule,value,callback)=>{
        let reg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(16[0-9])|(17[013678])|(18[0,5-9]))\d{8}$/;
        if(reg.test(value)){
          callback()
        }else{
           callback(new Error(this.$t('account.telephoneNotRight')))
        }
      }
      //校驗身份證號
      var valididNo = (rule,value,callback)=>{
        let reg =
/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        if(reg.test(value)){
          callback()
        }else{
           callback(new Error(this.$t('account.idNoNotRight')))
        }
      }
      //校驗郵箱
      var validEmail = (rule,value,callback)=>{
        let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(reg.test(value)){
          callback()
        }else{
           callback(new Error(this.$t('account.emailNotRight')))
        }
      }
return{
rules: {
          userId: [{ required: true, message: this.$t('account.userIdCannotBeNull'), trigger: 'blur' }],
          userName: [{ required: true, message: this.$t('account.userNameCannotBeNull'), trigger: 'blur' }],
          password: [{ required: true, message: this.$t('account.passwordCannotBeNull') }, { validator: validPwd, trigger: 'blur' }],
          re_password: [{ required: true, message: this.$t('account.rePasswordCannotBeNull') }, { validator: validRePwd, trigger: 'blur' }],
          maxSessionNumber: [{ required: true, message: '最大會話數不為空', trigger: 'blur' }],
         
          email:[{required:true,message: this.$t('account.emailCannotBeNull'), trigger: 'blur'},{ validator: validEmail, trigger: 'blur' }],
          idNo:[{required:true,message: this.$t('account.telephoneCannotBeNull'), trigger: 'blur'},{ validator: valididNo, trigger: 'blur' }],
          mobile:[{required:true,message: this.$t('account.telephoneCannotBeNull')},{ validator: validtelephone, trigger: 'blur' }],
          qq:[{max: 10, message: 'QQ最長10位', trigger: 'blur' }]
        },
 
}
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM