ElementUi rules表單驗證

hiyayiji 發布于2019-08-21 18:20 / 677人閱讀

摘要：表單驗證可以在中書寫正則，并且配合進行表單驗證。屬性規定用于驗證輸入字段的模式。

ElementUi 表單驗證

可以在pattern中書寫正則，并且配合elementUI進行表單驗證。

pattern 屬性規定用于驗證輸入字段的模式。模式指的是正則表達式。

rules: {
    name:[{
        required: true,
        message: "請輸入用戶名",
        trigger: "blur"
        },{
        min: 2,
        max: 5,
        message: "長度在 2 到 5 個字符"
        },{
        pattern: /^[u4E00-u9FA5]+$/,
        message: "用戶名只能為中文"
    }
        //{ pattern:/^[a-zA-Z]w{1,4}$/, message: "以字母開頭，長度在2-5之間， 只能包含字符、數字和下劃線"}
    ],
    password: [{
        required: true,
        message: "請輸入密碼",
        trigger: "blur"
    }, {
        min: 6,
        max: 30,
        message: "長度在 6 到 30 個字符"
    }, {
        pattern: /^(w){6,20}$/,
        message: "只能輸入6-20個字母、數字、下劃線"
    }],
    mobile:[{ 
        required: true,
        message: "請輸入手機號碼",
        trigger: "blur"
    },
    {validator:function(rule,value,callback){
            if(/^1[34578]d{9}$/.test(value) == false){
                callback(new Error("請輸入正確的手機號"));
            }else{
                callback();
            }
        }, trigger: "blur"}
    ],
    //   pattern: /^1[34578]d{9}$/, message: "目前只支持中國大陸的手機號碼" }
    peopleID:[{
        required: true,
        message: "請輸入身份證ID",
        trigger: "blur"
        },{
           pattern:/(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/, message: "你的身份證格式不正確" 
        }
    ],
    carId:[
        {required: true, message: "請輸入車牌號", trigger: "blur"}, 
        {pattern:/(^[u4E00-u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9u4E00-u9FA5]{1}[A-Z0-9]{4}$)|(^[u4E00-u9FA5]{1}[A-Z0-9]{5}[掛學警軍港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9掛學警軍港澳]{1}$)/,
         message: "常規格式：晉B12345"},
    ],
},

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90367.html

關于elementUI中el-form的rules

摘要：是否必填，如不設置，則會根據校驗規則自動生成不太清楚為啥要這么寫，這里是指定自己寫的規則。在自己寫的方法中，可以將公共方法給調用進來這里的代表表單域驗證錯誤信息設置該值會使表單驗證狀態變為，并顯示該錯誤信息以下代碼是借用鏈接描述 showImg(https://segmentfault.com/img/bVYu9N?w=652&h=32);一般我們在使用elementUI來實現一個表...

siberiawolf 2019-08-01 17:59 評論0 收藏0
elementUI中form表單的upload上傳圖片及校驗總結

摘要：自定義校驗方法因為我的項目是分情況可以選擇是否有圖所以我定義了一個變量當他為的時候才會要求上傳走這個校驗方法里聲明這個方法圖片驗證請上傳圖片圖片驗證根據情況去切換的值就可以控制是否校驗失敗啦這就是校驗圖片的思路了是不是很簡單呢再來說說表單帶自定義校驗方法,因為我的項目是,分情況,可以選擇是否有圖,所以我定義了一個變量hasFmt,當他為false的時候,才會要求上傳,走這個校驗方法,...

番茄西紅柿 2019-08-23 14:22 評論0 收藏0
JavaScript 設計模式系列 - 策略模式與動態表單驗證

摘要：策略模式又稱政策模式，其定義一系列的算法，把它們一個個封裝起來，并且使它們可以互相替換。的表單具有表單驗證功能，用來校驗用戶輸入的表單內容。實際需求中表單驗證項一般會比較復雜，所以需要給每個表單項增加自定義校驗方法。 showImg(https://segmentfault.com/img/remote/1460000020135990); 策略模式（Strategy Pattern...

宋華 2019-08-26 14:06 評論0 收藏0
基于Vue,ElementUI開發的一款表單設計器

摘要：介紹基于開發的一款表單設計器，提高表單開發效率的利器，讓開發者從枯燥的表單代碼編寫中解放出來工具地址地址特性可視化配置頁面提供柵格布局，并采用實現對齊一鍵預覽配置的效果一鍵生成配置數據一鍵生成代碼，立即可運行提供自定義組件滿足用戶自定義介紹基于Vue,ElementUI開發的一款表單設計器，提高表單開發效率的利器，讓開發者從枯燥的表單代碼編寫中解放出來工具地址：http://to...

DandJ 2019-08-23 12:13 評論0 收藏0
動態高可配置表單設計

摘要：表單配置校驗配置屬性流配置生成表單交互技術棧特性支持自定義屬性支持基于的值校驗支持父子屬性支持屬性流程設置支持多值數據庫設計關鍵數據結構屬性對象中文名英文名短名是否復合對象數據類型描述排序是否有效校驗規則是否支持流屬性是否為流屬性是否支持 demo: 表單配置showImg(https://segmentfault.com/img/bVbci1F?w=1730&h=406);校驗配置s...

stackvoid 2019-08-22 18:04 評論0 收藏0