Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容(rules?案例)

更新時(shí)間：2022年06月28日 11:30:05 作者：JackieDYH

這篇文章主要介紹了Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容-rules-案例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

AntD是什么？

AntD is An enterprise-class UI design language and React UI library.(AntD是一款企業(yè)級(jí)的UI設(shè)計(jì)語言和React UI類庫。)

antd的特性和優(yōu)勢(shì)如下：

1、提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語言和視覺風(fēng)格。

2、開箱即用的高質(zhì)量 React 組件。

3、使用 TypeScript 構(gòu)建，提供完整的類型定義文件。

4、全鏈路開發(fā)和設(shè)計(jì)工具體系

5、數(shù)十個(gè)國(guó)際化語言支持。

6、深入每個(gè)細(xì)節(jié)的主題定制能力。

antd應(yīng)用方法

1、安裝

安裝組件庫：npm install antd --save或yarn add antd

安裝圖標(biāo)庫：npm install @ant-design/icons -s

下面看下Vue input組件驗(yàn)證輸入框輸入內(nèi)容的實(shí)現(xiàn)代碼，效果圖如下所示：

效果圖

示例代碼

<a-form-model-item prop="phone">
  <a-input v-model="form.phone" :maxLength="11" placeholder="手機(jī)號(hào)" />
</a-form-model-item>
<a-form-model-item prop="code">
  <a-input v-model="form.code" placeholder="驗(yàn)證碼" />
</a-form-model-item>
<a-form-model-item prop="num">
  <a-input v-model="form.num" placeholder="請(qǐng)輸入數(shù)字" />
</a-form-model-item>

<script>
export default {
  name: "Login",
  data() {
    const validateCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("驗(yàn)證碼為空"));
        return false;
      } else if (value !== this.identifyCode) {
        callback(new Error("驗(yàn)證碼不正確"));
        return false;
      } else {
        callback();
      }
    };
    //使用正則表達(dá)式驗(yàn)證手機(jī)號(hào)
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手機(jī)號(hào)不能為空"));
      } else {
        //獲取工具類中的手機(jī)號(hào)正則表達(dá)式
        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 {
          //如果驗(yàn)證輸入錯(cuò)誤就清空
          this.form.phone = "";
          return callback(new Error("請(qǐng)輸入正確的手機(jī)號(hào)"));
        }
      }
    };
    return {
      form: {
        phone: "",
        password: "",
        code: "",
		num:"",
      },
      rules: {
        phone: {
          validator: checkPhone,//自定義校驗(yàn)
          //   required: true,
          //   message: "手機(jī)號(hào)",
          trigger: "blur",
        },
        password: { required: true, message: "請(qǐng)輸入密碼", trigger: "blur" },
        code: [
          {
            // validator: validateCode,
            required: true,
            message: "請(qǐng)輸入驗(yàn)證碼",
            trigger: "blur",
          },
        ],
		num: [
          {
            required: true,
            pattern: new RegExp(/^[0-9]\d*$/, 'g'),//正則表達(dá)式校驗(yàn)
            message: '請(qǐng)輸入類型為整數(shù)!',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  computed: {
    // 用于校驗(yàn)手機(jī)號(hào)碼格式是否正確
    phoneNumberStyle() {
      let reg = /^1[3456789]\d{9}$/;
      if (!reg.test(this.form.phone)) {
        return false;
      }
      return true;
    },
  },
};
</script>

到此這篇關(guān)于Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容-rules-案例的文章就介紹到這了,更多相關(guān)Vue input組件驗(yàn)證輸入框輸入內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: