Vue使用antd中input元件去驗證輸入框輸入內容

導讀	這篇文章主要介紹了Vue使用antd中input元件去驗證輸入框輸入內容-rules-案例,本文通過例項程式碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑑價值，需要的朋友可以參考下

< a-form-model-item prop="phone">
  < a-input v-model="form.phone" :maxLength="11" placeholder="手機號" />
< /a-form-model-item>
< a-form-model-item prop="code">
  < a-input v-model="form.code" placeholder="驗證碼" />
< /a-form-model-item>
< a-form-model-item prop="num">
  < a-input v-model="form.num" placeholder="請輸入數字" />
< /a-form-model-item>

< script>
export default {
  name: "Login",
  data() {
    const validateCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("驗證碼為空"));
        return false;
      } else if (value !== this.identifyCode) {
        callback(new Error("驗證碼不正確"));
        return false;
      } else {
        callback();
      }
    };
    //使用正規表示式驗證手機號
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手機號不能為空"));
      } else {
        //獲取工具類中的手機號正規表示式
        const phoneReg =
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if (phoneReg.test(value)) {
          callback();
        } else {
          //如果驗證輸入錯誤就清空
          this.form.phone = "";
          return callback(new Error("請輸入正確的手機號"));
        }
      }
    };
    return {
      form: {
        phone: "",
        password: "",
        code: "",
        num:"",
      },
      rules: {
        phone: {
          validator: checkPhone,//自定義校驗
          //   required: true,
          //   message: "手機號",
          trigger: "blur",
        },
        password: { required: true, message: "請輸入密碼", trigger: "blur" },
        code: [
          {
            // validator: validateCode,
            required: true,
            message: "請輸入驗證碼",
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            pattern: new RegExp(/^[0-9]\d*$/, 'g'),//正規表示式校驗
            message: '請輸入型別為整數!',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  computed: {
    // 用於校驗手機號碼格式是否正確
    phoneNumberStyle() {
      let reg = /^1[3456789]\d{9}$/;
      if (!reg.test(this.form.phone)) {
        return false;
      }
      return true;
    },
  },
};
< /script>

到此這篇關於Vue使用antd中input元件去驗證輸入框輸入內容-rules-案例的文章就介紹到這了。

原文來自：