摘要:場景描述某表單中有一個郵箱的輸入框,但是為非必填項,我們期望的結果不填寫可以驗證通過如果填寫了郵箱驗證郵箱格式代碼如下全部通過備用郵箱非必填提交未填寫郵箱運行結果沒有達到期望結果,如下圖方案重寫驗證規則官方有示例,可以自己重寫一個驗
場景描述
某表單中有一個郵箱的輸入框,但是為非必填項,我們期望的結果 1. 不填寫可以驗證通過 1. 如果填寫了郵箱,驗證郵箱格式
代碼如下
未填寫郵箱 【運行結果】沒有達到期望結果,如下圖方案1:重寫驗證規則
官方有示例,可以自己重寫一個驗證規則
代碼如下
未填寫郵箱 【運行結果】達到期望結果,如下圖
avalon內置驗證規則重寫,如下
function isRegExp(value) { return avalon.type(value) === "regexp" } var rmail = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/i var rurl = /^(ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?$/ function isCorrectDate(value) { if (typeof value === "string" && value) { //是字符串但不能是空字符 var arr = value.split("-") //可以被-切成3份,并且第1個是4個字符 if (arr.length === 3 && arr[0].length === 4) { var year = ~~arr[0] //全部轉換為非負整數 var month = ~~arr[1] - 1 var date = ~~arr[2] var d = new Date(year, month, date) return d.getFullYear() === year && d.getMonth() === month && d.getDate() === date } } return false } avalon.shadowCopy(avalon.validators, { pattern: { message: "必須匹配{{pattern}}這樣的格式", get: function (value, field, next) { var elem = field.dom var data = field.data if (!isRegExp(data.pattern)) { var h5pattern = elem.getAttribute("pattern") data.pattern = new RegExp("^(?:" + h5pattern + ")$") } next(value === "" || data.pattern.test(value)) return value } }, digits: { message: "必須整數", get: function (value, field, next) {//整數 next(value === "" || /^-?d+$/.test(value)) return value } }, number: { message: "必須數字", get: function (value, field, next) {//數值 next(value === "" || isFinite(value)) return value } }, date: { message: "日期格式不正確", get: function (value, field, next) { var data = field.data if (isRegExp(data.date)) { next(value === "" || data.date.test(value)) } else { next(value === "" || isCorrectDate(value)) } return value } }, url: { message: "URL格式不正確", get: function (value, field, next) { next(value === "" || rurl.test(value)) return value } }, email: { message: "email格式不正確", get: function (value, field, next) { next(value === "" || rmail.test(value)) return value } }, minlength: { message: "最少輸入{{minlength}}個字", get: function (value, field, next) { var num = parseInt(field.data.minlength, 10) next(value === "" || (value.length >= num)) return value } }, min: { message: "輸入值不能小于{{min}}", get: function (value, field, next) { var num = parseInt(field.data.min, 10) next(value === "" || (parseFloat(value) >= num)) return value } }, max: { message: "輸入值不能大于{{max}}", get: function (value, field, next) { var num = parseInt(field.data.max, 10) next(value === "" || (parseFloat(value) <= num)) return value } }, chs: { message: "必須是中文字符", get: function (value, field, next) { next(value === "" || /^[u4e00-u9fa5]+$/.test(value)) return value } } })方案2:修改源碼中addField方法
如果不想重寫驗證規則 修改源碼 avalon/src/directives/duplex/addValidateField.js 添加2行代碼,打包 運行后結果達到預期
if (rules["required"] === undefined || rules["required"] === false) field.norequired = true;
如下圖
說明:
這2行代碼是指 在"ms-rules"中沒有配置必填項"required"規則或"required"設置為false時, 設置該field為非必填,field.norequired為true 在源碼 avalon/src/directives/duplex/addValidateField.js 中有這么一段代碼
if (field.norequired && value === "") { a = true }
如下圖紅框
此方案我自測是沒問題的,但不知是否全面,希望avalon的后續版本會考慮此情況
歡迎指正
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80296.html
摘要:創建詳解通過上面的快速創建我們接下來將通過上面的例子來進行創建操作中的詳細設置說明。高階設置高階設置中將針對容器進行詳細的參數設置。掛載路徑卷名稱注意如沒有創建卷設置,在掛載卷中將選擇不到具體的卷名稱,請先創建卷設置。快速創建快速創建Cube實例點擊Cube的創建按鈕進入創建頁面,為你的容器組起一個名字;選擇一個倉庫內的鏡像,這里快速創建我選擇的UCloud鏡像倉庫nginx鏡像1.17.1...
摘要:驗證結果會保存在組建實例的屬性下。表單整體校驗結果和單個字段校驗結果。郵政編碼是必填項對象字面量對象字面量語法適合需要額外參數的校驗器。如限制輸入長度的校驗器需要說明限制長度多少。這樣可以用來動態綁定校驗規則。例如重復密碼功能。 Vue-validator 是Vue的表單驗證插件 Vue版本:1.0.24Vue-validator版本:2.1.3 基本使用 ...
摘要:需求默認都是必選下拉選擇的時候選擇必填,活動名稱為必填,需要校驗和顯示選擇非必填,活動名稱不做校驗,隱藏初始校驗規則經測試,網上其他的方式都沒有實現需求,動態切換中的沒有作用因為按照以下的寫法的話,在組件初始化后校驗規則就定型了,切換也沒 ? 需求 默認都是必選 下拉選擇的時候 選擇必填,活動名稱為必填,需要校驗和顯示* 選擇非必填,活動名稱不做校驗,隱藏* showImg(https...
閱讀 3024·2021-09-22 15:52
閱讀 2903·2019-08-30 15:55
閱讀 2700·2019-08-30 15:53
閱讀 2454·2019-08-30 13:21
閱讀 1621·2019-08-30 13:10
閱讀 2481·2019-08-26 12:09
閱讀 2564·2019-08-26 10:33
閱讀 1802·2019-08-23 18:06