關於element-ui表單驗證（自定義驗證規則）

 <el-form
            :model="ruleForm" :rules="rules"
            ref="ruleForm"
            label-width="100px"
            labelPosition="top"
            :inline="true"
            class="demo-ruleForm"
          >
            <el-row :gutter="59">
              <el-col :span="12">
                <el-form-item :label="$t('joinUs.surname')" prop="surname">
                  <el-input class="edit-input" v-model="ruleForm.surname"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('joinUs.givenName')" prop="givenName">
                  <el-input class="edit-input" v-model="ruleForm.givenName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="59">
              <el-col :span="12">
                <el-form-item :label="$t('joinUs.email')" prop="email">
                  <el-input class="edit-input" v-model="ruleForm.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('joinUs.phone')" prop="phoneNumber" required>
                  <el-row class="edit-tel">
                    <el-col :span="8">
                      <el-input class="edit-tel1" v-model="phone1"></el-input>
                    </el-col>
                    <el-col class="line" :span="2">—</el-col>
                    <el-col :span="14">
                      <el-input class="edit-tel2" v-model="phone2"></el-input>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

 

需求：
必填：

surname  givenName  email  phoneNumber

正則：

surname  只容許輸入英文

givenName  只容許輸入中文

phoneNumber  只容許輸入1-20個數字，

email  郵箱

data () {
    return {
      ruleForm: {
        surname: "",
        givenName: "",
        email: "",
        phoneNumber: ""
      }
      phone1: "",
      phone2: ""
   }
}    

 

因爲國際化問題，切換時在 data 中不起做用，須要將表達式放到 computed 屬性中

computed: {
    rules () {
      var validateSurnmae = (rule, value, callback) => {
        let reg = /^[A-Za-z]+$/
        if (!reg.test(value)) {
          callback(new Error(this.$t('joinUs.surnameErr3')))
        } else {
          callback()
        }
      };
      var validateGivenName = (rule, value, callback) => {
        let reg = /^[\u4e00-\u9fa5]+$/
        if (!reg.test(value)) {
          callback(new Error(this.$t('joinUs.givenNameErr3')))
        } else {
          callback()
        }
      };return {
        surname: [
          { required: true, message: this.$t('joinUs.surnameErr1'), trigger: "blur" },
          { validator: validateSurnmae, trigger: "blur" },
          { min: 1, max: 20, message: this.$t('joinUs.surnameErr2'), trigger: "blur" }
        ],
        givenName: [
          { required: true, message: this.$t('joinUs.givenNameErr1'), trigger: "blur" },
          { validator: validateGivenName, trigger: "blur" },
          { min: 1, max: 20, message: this.$t('joinUs.givenNameErr2'), trigger: "blur" }
        ]
        email: [
          { required: true, message: this.$t('joinUs.emailError'), trigger: "blur" },
          {
            type: "email",
            message: this.$t('joinUs.emailError'),
            trigger: ["blur", "change"]
          }
        ],
        phoneNumber: [
          { required: true, message: this.$t('joinUs.phoneNumberError1'), trigger: "blur" },
          { type: 'number', message: this.$t('joinUs.phoneNumberError2'), trigger: "blur" }
        ]
      }
    }
  }

 

由於項目須要，如今的 tel 電話 是加區號的  

因此寫成了上面那種形式，

兩個框的單獨的，而後用watch監聽輸入框，把兩個框的內容拼接

watch: {
    'phone1': function (val) {
      this.ruleForm.phoneNumber = parseInt(val + this.phone2)
    },
    'phone2': function (val) {
      this.ruleForm.phoneNumber = parseInt(this.phone1 + val)
    }
  },

這樣就獲得了總的電話號碼。而後去給總的號碼添加校驗規則

OK！