1. 程式人生 > 實用技巧 >vue新增使用者校驗(element-ui)

vue新增使用者校驗(element-ui)

data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('請輸入密碼'))
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.addForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      
if (value === '') { callback(new Error('請再次輸入密碼')) } else if (value !== this.form.password) { callback(new Error('兩次輸入密碼不一致!')) } else { callback() } } var checkphone = (rule, value, callback) => { // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
if (value === '') { callback(new Error('請輸入手機號')) } else if (!this.isCellPhone(value)) { //引入methods中封裝的檢查手機格式的方法 callback(new Error('請輸入正確的手機號!')) } else { callback() } } return {//新增使用者的表單物件 form: {}, rules: { username: [ { required:
true, message: '請輸入使用者名稱', trigger: 'blur' }, { min: 3, max: 5, message: '長度在 3 到 5 個字元', trigger: 'blur' } ], password: [ { required: true, message: '請輸入密碼', trigger: 'blur' }, { validator: validatePass, trigger: 'blur' } ], checkPass: [ { required: true, message: '請輸入確認密碼', trigger: 'blur' }, { validator: validatePass2, trigger: 'blur' } ], email: [ { required: true, message: '請輸入郵箱', trigger: 'blur' }, { type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] } ], mobile: [ { required: true, message: '請輸入手機號', trigger: 'blur' }, { validator: checkphone, trigger: 'blur' } ] } } }, methods: {//檢查手機號 isCellPhone(val) { if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) { return false } else { return true } } }