Vue Element Form 表單 驗證

Form 表單  

本示例以 Vue Element Admin 項目爲基礎，介紹 Form 表單



需要注意 model、rules、ref、prop 名稱
:model="ruleForm" 
:rules="rules" 
ref="ruleForm"
prop="name"

表單驗證 rules 屬性約定驗證規則

{ min: 5, max: 9, message: "活動名稱長度在 5 到 9 個字符" }, //只能驗證字符串類型
{ type: "number", message: "年齡必須爲數字值" },
{ type: 'email', message: '請輸入正確的郵箱', trigger: ['blur', 'change'] }

表單驗證 rules 屬性約定驗證規則，自定義有3種方式
方式一：vue 頁面中使用 pattern

rules: {
  tel: [
    { required: true, message: "請輸入手機號" },
    { pattern: /^(13[0-9]|14[1|4|5|6|7|8|9]|15[0|1|2|3|5|6|7|8|9]|17[2|3|5|6|7|8]|18[0-9]|19[1|8|9])\d{8}$/, message: '手機號格式不正確' }
  ]
}

方式二：vue 頁面中使用 validator

<script>
export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.ruleForm.pass) {
        callback(new Error("兩次輸入密碼不一致!"));
      } else {
        callback();
      }
    };
  },
  return {
    rules:{
      age: [{ validator: checkAge }]
    }
  },
}
</script>

方式3：vue 頁面中使用 validator + 引用 /utils/validate.js 文件

<script>
import { regPassword } from "@/utils/validate";

export default {
  return {
    rules:{
      payPass: [
        { validator: regPassword, trigger: "blur" }
      ]
    }
  },
}
</script>



// validate.js 代碼如下
export function validName(str) {
  const reg = /^[a-zA-Z]+$/
  return reg.test(str)
}

export var regPassword = (rule, value, callback) => {
  const reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,20}$/;
  if (!value) {
    callback(new Error('請輸入支付密碼'));
  } else {
    let check = reg.test(value);
    if (!check) {
      callback(new Error('支付密碼爲字母、數字和符號三種組合，8-20個字符'))
    } else {
      callback()
    }
  }
}

1、/src/views/demo/test-form.vue

<template>
  <div class="app-container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="活動名稱" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密碼" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="確認密碼" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="支付密碼" prop="payPass">
        <el-input type="password" v-model="ruleForm.payPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年齡" prop="age">
        <el-input v-model.number="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item label="手機號" prop="tel">
        <el-input v-model="ruleForm.tel" auto-complete="off" placeholder="請輸入手機號"></el-input>
      </el-form-item>
      <el-form-item label="郵箱" prop="email">
        <el-input v-model="ruleForm.email" placeholder="請輸入郵箱"></el-input>
      </el-form-item>
      <el-form-item label="驗證碼" prop="smscode" class="code">
        <el-input v-model="ruleForm.smscode" placeholder="驗證碼"></el-input>
        <el-button type="primary" :disabled="ruleForm.isSendDisabled" @click="sendCode">{{ruleForm.sendText}}</el-button>
      </el-form-item>
      <el-form-item label="活動區域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="請選擇活動區域">
          <el-option label="區域一" value="shanghai"></el-option>
          <el-option label="區域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活動時間" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker
              type="date"
              placeholder="選擇日期"
              v-model="ruleForm.date1"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-picker placeholder="選擇時間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="即時配送" prop="delivery">
        <el-switch v-model="ruleForm.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活動性質" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
          <el-checkbox label="地推活動" name="type"></el-checkbox>
          <el-checkbox label="線下主題活動" name="type"></el-checkbox>
          <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊資源" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="線上品牌商贊助"></el-radio>
          <el-radio label="線下場地免費"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活動形式" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即創建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { validName, regPassword } from "@/utils/validate";

export default {
  data() {
    var checkAge = (rule, value, callback) => {
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("請輸入數字值"));
        } else {
          if (value < 18) {
            callback(new Error("必須年滿18歲"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.ruleForm.pass) {
        callback(new Error("兩次輸入密碼不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        pass: "",
        checkPass: "",
        payPass: "",
        age: 0,
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        tel: "",
        email: "",
        smscode: "",
        sendText: "發送驗證碼",
        isSendDisabled: false, // 是否禁止點擊發送驗證碼按鈕
        flag: true
      },
      rules: {
        name: [
          { required: true, message: "請輸入活動名稱" },
          { min: 3, max: 5, message: "活動名稱長度在 3 到 5 個字符" }
        ],
        pass: [
          { required: true, message: "請輸入密碼" },
          { pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,20}$/, message: '密碼爲數字，小寫字母，大寫字母，特殊符號 至少包含三種，長度在8-20位' },
        ],
        checkPass: [
          { required: true, message: "請輸入確認密碼", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" }
        ],
        age: [
          { required: true, message: "請輸入年齡" },
          { type: "number", message: "年齡必須爲數字值" },
          { validator: checkAge }
        ],
        tel: [
          { required: true, message: "請輸入手機號" },
          { pattern: /^(13[0-9]|14[1|4|5|6|7|8|9]|15[0|1|2|3|5|6|7|8|9]|17[2|3|5|6|7|8]|18[0-9]|19[1|8|9])\d{8}$/, message: '手機號格式不正確' },   
        ],
        email:[
             { required: true, message: '請輸入郵箱', trigger: 'blur' },
             { type: 'email', message: '請輸入正確的郵箱', trigger: ['blur', 'change'] }
        ],
        region: [
          { required: true, message: "請選擇活動區域", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "請選擇日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "請選擇時間",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "請至少選擇一個活動性質",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "請選擇活動資源", trigger: "change" }
        ],
        desc: [{ required: true, message: "請填寫活動形式", trigger: "blur" }]
      }
    };
  },
  methods: {
    sendCode() {
        console.log(`Ln 181`)
        let time = 10
        this.ruleForm.sendText = '已發送'
        this.ruleForm.isSendDisabled = true
        if (this.ruleForm.flag) {
          this.ruleForm.flag = false;
          let timer = setInterval(() => {
            time--;
            this.ruleForm.sendText = time + ' 秒'
            if (time === 0) {
              clearInterval(timer);
              this.ruleForm.sendText = '重新獲取'
              this.ruleForm.isSendDisabled = false
              this.ruleForm.flag = true;
            }
          }, 1000)
        }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 生成一個隨機數
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 生成一個隨機的顏色
    randomColor(min, max) {
      var r = this.randomNum(min, max)
      var g = this.randomNum(min, max)
      var b = this.randomNum(min, max)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
    checkMobile(str) {
      let re = /^1\d{10}$/
      if (re.test(str)) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style>
.code >>> .el-form-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

2、/src/utils/validate.js

/**
 * Created by PanJiaChen on 16/11/18.
 */

/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

/**
 * @param {string} url
 * @returns {Boolean}
 */
export function validURL(url) {
  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

/**
 * @param {string} email
 * @returns {Boolean}
 */
export function validEmail(email) {
  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return reg.test(email)
}

/**
 * @param {string} password
 * @returns {Boolean}
 */
export function validPassword(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function isString(str) {
  if (typeof str === 'string' || str instanceof String) {
    return true
  }
  return false
}

/**
 * @param {Array} arg
 * @returns {Boolean}
 */
export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}

export function validName(str) {
  const reg = /^[a-zA-Z]+$/
  return reg.test(str)
}

export var regPassword = (rule, value, callback) => {
  const reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,20}$/;
  if (!value) {
    callback(new Error('請輸入支付密碼'));
  } else {
    let check = reg.test(value);
    if (!check) {
      callback(new Error('支付密碼爲字母、數字和符號三種組合，8-20個字符'))
    } else {
      callback()
    }
  }
}

*
*
*
*
*