技術標籤：vueelementui

表單

  <div class="informa">
        <div class="tetli">經營者資訊</div>
        <el-form-item label="門店負責人：" prop="contacts">
          <el-input v-model="ruleForm.contacts"  placeholder="請輸入門店負責人"
 
></el-input>
        </el-form-item>
        <el-form-item label="聯絡方式：" prop="contactPhone">
          <el-input v-model="ruleForm.contactPhone" placeholder="請輸入聯絡方式" type="number"></el-input>
        </el-form-item>
 

        <el-form-item label="門店郵箱：" prop="email">
          <el-input v-model="ruleForm.email" placeholder="請輸入郵箱"></el-input>
        </el-form-item>
      </div>

在data中自定義郵箱和手機的驗證規則

 data() {
    //自定義的郵箱和手機驗證規則
    let checkEmail =
 
 (rule, value,callback) =>{//驗證郵箱
      const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)[email protected][a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if(this.ruleForm.email != '' && !regEmail.test(this.ruleForm.email)) {
        callback(new Error('請輸入有效的郵箱')); 
      }
    }
    return {
      rules: { 
         email:[{ required: true, message: '請輸入郵箱', trigger: 'blur' },
        		{validator: checkEmail, trigger: "blur" }]}
    }