uniapp + uviewui —— 表单正则校验

Juliet_xmj

于 2023-04-18 09:35:54 发布

阅读量1.7k

点赞数

分类专栏：插件及UI框架开发问题解决小程序文章标签： uni-app 微信小程序前端

本文链接：https://blog.youkuaiyun.com/Juliet_xmj/article/details/130214107

版权

插件及UI框架开发问题解决同时被 2 个专栏收录

14 篇文章

订阅专栏

小程序

5 篇文章

订阅专栏

在Vue.js应用中，页面加载时通过onReady()生命周期钩子动态设置u-form组件的验证规则rules。例如，密码字段要求6~20位，包含数字和字母的组合。使用正则表达式进行复杂性验证，并通过$refs.uForm.validateField()方法实现对特定表单字段的单独校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面加载时设置rules，表单u–form标签中不写:rules = rules

生命周期onReady()

举例密码

<template>
	<u--form :model="form" ref="uForm">
		<u-form-item prop="password" borderBottom label="密码">
          <u-input
            v-model="form.password"
            placeholder="6~20位两位字符以上组合"
            border="none"
            clearable />
	</u--form>
</template>
data(){
	return {
		form: {
			password: ''
		}
		rules: {
	        password: [
	          {
	            required: true,
	            message: '请填写密码',
	            trigger: ['blur', 'change']
	          },
	          {
	            validator: (rule, value, callback) => {
	              return RegExp(
	                /^(?![\d]+$)(?![a-zA-Z]+$)(?![-=+_.,]+$)[\da-zA-Z-=+_.,]{6,20}$/
	              ).test(value)
	            },
	            message: '6~18位两位字符以上组合',
	            trigger: ['change', 'blur']
	          }
	        ]
      }
	}
},
onReady() {
  this.$refs['uForm'].setRules(this.rules)
 },

单独校验表单其中一个元素时

testPassWord() {
	this.$refs['uForm'].validateField(['password'], async (valid) => {
		// 操作
	}
}