国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

uniapp表單uni-forms校驗自定義校驗規(guī)則,手機校驗、身份證校驗

這篇具有很好參考價值的文章主要介紹了uniapp表單uni-forms校驗自定義校驗規(guī)則,手機校驗、身份證校驗。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

validateFunction 自定義校驗規(guī)則
如果需要使用 validateFunction 自定義校驗規(guī)則,則不能采用 uni-forms 的 rules 屬性來配置校驗規(guī)則,這時候需要通過ref,在onReady生命周期調(diào)用組件的setRules方法綁定驗證規(guī)則 無法通過props傳遞變量,是因為微信小程序會過濾掉對象中的方法,導致自定義驗證規(guī)則無效。

<uni-forms ref="form">
					<uni-forms-item required label="手機號" name="mob">
						<uni-easyinput v-model="mob"  placeholder="手機號" />
					</uni-forms-item>
					<uni-forms-item required label="身份證" name="id_num">
						<uni-easyinput v-model="DataAll.id_num"  placeholder="身份證" />
					</uni-forms-item>
</uni-forms>
				//表單校驗規(guī)則
				dynamicRules: {
					mob: {
						rules: [{
							required: true,
							errorMessage: '請?zhí)顚懯謾C號碼',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = (
									/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
								); //手機號碼
								if (!iphoneReg.test(value)) {
									callback('手機號碼格式不正確,請重新填寫')
								}
							}
						}]
					},
					id_num: {
						rules: [{
							required: true,
							errorMessage: '請?zhí)顚懮矸葑C',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = (
									/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
								); //
								if (!iphoneReg.test(value)) {
									callback('身份證格式不正確,請重新填寫')
								}
							}
						}, ]
					},
				},
	onReady() {
		// 需要在onReady中設置規(guī)則
		this.$refs.form.setRules(this.dynamicRules)
	},
			submit() {
				let _this = this
				this.$refs.form.validate().then(res => {
					console.log('表單數(shù)據(jù)信息:', res);
				}).catch(err => {
					console.log('表單錯誤信息:', err);
				})
			},

具體的使用規(guī)則看官方文檔,很詳細
uni-app表單校驗官方文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-505122.html

到了這里,關于uniapp表單uni-forms校驗自定義校驗規(guī)則,手機校驗、身份證校驗的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領支付寶紅包贊助服務器費用

相關文章

  • Element Plus Form 動態(tài)表單自定義校驗規(guī)則使用教程

    Element Plus Form 動態(tài)表單自定義校驗規(guī)則使用教程

    Element Plus,基于 Vue 3,面向設計師和開發(fā)者的組件庫 Element Plus 官網(wǎng):https://element-plus.org/zh-CN/ Element Plus Form 動態(tài)表單自定義效驗規(guī)則,官網(wǎng)示例代碼中沒有,官網(wǎng)示例中的動態(tài)表單是固定的規(guī)則,本文講解動態(tài)表單自定義規(guī)則的使用 目錄 1、官網(wǎng)動態(tài)表單示例代碼 2、表單自

    2024年01月18日
    瀏覽(28)
  • uniapp自定義tab切換css樣式、uni-forms中input下拉等標簽字體、過寬、溢出樣式一系列調(diào)整(附加實戰(zhàn)舉例)
  • vue3 antd項目實戰(zhàn)——Form表單的提交與校驗【v-model雙向綁定input輸入框、form表單數(shù)據(jù),動態(tài)校驗規(guī)則】

    vue3 antd項目實戰(zhàn)——Form表單的提交與校驗【v-model雙向綁定input輸入框、form表單數(shù)據(jù),動態(tài)校驗規(guī)則】

    本文依舊沿用 ant design vue 組件庫和 ts 語言????更多內(nèi)容見Ant Design Vue官方文檔 ???? vue3 antd項目實戰(zhàn)——Form表單【后臺管理系統(tǒng) v-model數(shù)據(jù)的雙向綁定,input輸入框、Radio單選框的嵌套使用】 在上期文章中,我們完成了 UI界面的渲染 (渲染效果如下圖),本期文章將帶著大

    2023年04月22日
    瀏覽(24)
  • el-form表單中不同數(shù)據(jù)類型對應的時間格式化和校驗規(guī)則

    el-form表單中不同數(shù)據(jù)類型對應的時間格式化和校驗規(guī)則

    ?1. 在表單中, 當選擇不同的數(shù)據(jù)類型時, 需要在下面選擇時間時和數(shù)據(jù)類型對應上, 通過監(jiān)聽數(shù)據(jù)類型的變化, 給時間做格式化, 2. 但是當不按順序選擇數(shù)據(jù)類型后, 再選時間可能會報錯, 所以需要在dom更新后, 再清空表單. 3. 校驗規(guī)則, 結束時間需要大于開始時間, 但是不能選當

    2024年02月09日
    瀏覽(23)
  • el-form自定義校驗規(guī)則

    Vue 的 el-form 組件可以使用自定義校驗規(guī)則進行表單驗證。自定義校驗規(guī)則可以通過傳遞一個函數(shù)來實現(xiàn),該函數(shù)接受要校驗的字段的值作為參數(shù),并返回一個布爾值或一個 Promise 對象。 下面是一個示例,演示如何在 el-form 中使用自定義校驗規(guī)則: 在上述例子中,我們定義了

    2024年02月12日
    瀏覽(22)
  • (el-Form)操作(不使用 ts):Element-plus 中 Form 表單組件校驗規(guī)則等的使用

    (el-Form)操作(不使用 ts):Element-plus 中 Form 表單組件校驗規(guī)則等的使用

    1、 Element-plus 提供 Form 表單組件情況: 其一、 Element-plus 自提供的 Form 代碼情況為(示例的代碼): 代碼地址( 直接點擊下面 url 跳轉(zhuǎn) ):https://element-plus.gitee.io/zh-CN/component/form.html#自定義校驗規(guī)則 其二、頁面的顯示情況為: 2、目標想修改后的情況: // 此時雖然頁面的樣式有些變

    2024年02月13日
    瀏覽(25)
  • 前端-el-form表單校驗,如何校驗手機號和身份證號

    分成三部分處理 首先,要在模板的prop里添加校驗規(guī)則 el-form-item label=\\\"身份證號:\\\" prop=\\\"identificationNumber\\\" 然后申明規(guī)則rules identificationNumber:[ ? ? ? ? ? ? ? ? {required: true, validator: validatorIdCard, trigger: \\\'blur\\\'} ? ? ? ? ? ? ? ? ], phone: [ ? ? ? ? ? ? ? ? { required: true, validator: v

    2024年04月25日
    瀏覽(28)
  • Vue: el-form 自定義校驗規(guī)則

    Vue 的 el-form 組件可以使用自定義校驗規(guī)則進行表單驗證。自定義校驗規(guī)則可以通過傳遞一個函數(shù)來實現(xiàn),該函數(shù)接受要校驗的字段的值作為參數(shù),并返回一個布爾值或一個 Promise 對象。 下面是一個示例,演示如何在 el-form 中使用自定義校驗規(guī)則: 在上述例子中,我們定義了

    2024年02月12日
    瀏覽(23)
  • for循環(huán)遍歷的`form表單組件`rules規(guī)則校驗失效問題——下拉框選擇之后還是報紅---親測有效

    for循環(huán)遍歷的`form表單組件`rules規(guī)則校驗失效問題——下拉框選擇之后還是報紅---親測有效

    問題:? ?大概的效果就是這種, for循環(huán)選擇之后還是還是報紅 看文章之前 :? 先檢查? model??rules pops 有沒有判定好 解決:? ? 參考了他的?for循環(huán)遍歷的`form表單組件`rules規(guī)則校驗失效問題——輸入內(nèi)容后依然提示必填,親測有效——基礎積累_a-form-model的validatefield方法循環(huán)遍

    2024年02月07日
    瀏覽(29)
  • uniapp中UView中 u-form表單在v-for循環(huán)下如何進行表單校驗

    uniapp中UView中 u-form表單在v-for循環(huán)下如何進行表單校驗

    1、數(shù)據(jù)data格式 注:rule綁定的tableFromRule中要和表單tableFrom下面放置一個同名數(shù)組,確保u-form能找到 2、dom結構 3、u-form-item格式必須用 :prop=“ tableData.${index}.localation ” 4、修改源碼 找到async validateField(value, callback, event = null)函數(shù)進行替換 5、替換如下 6、在tableData每次塞數(shù)據(jù)的

    2024年02月09日
    瀏覽(82)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包,優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包