uniapp + uviewui —— 表单正则校验

在Vue.js应用中,页面加载时通过onReady()生命周期钩子动态设置u-form组件的验证规则rules。例如,密码字段要求6~20位,包含数字和字母的组合。使用正则表达式进行复杂性验证,并通过$refs.uForm.validateField()方法实现对特定表单字段的单独校验。
摘要由CSDN通过智能技术生成
页面加载时设置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) => {
		// 操作
	}
}
以下是使用Vue 3和uni-app实现表单校验的示例代码: ```vue <template> <div> <form @submit.prevent="submitForm"> <label for="name">姓名:</label> <input type="text" id="name" v-model="formData.name" /> <p v-if="errors.name" class="error">{{ errors.name }}</p> <label for="email">邮箱:</label> <input type="email" id="email" v-model="formData.email" /> <p v-if="errors.email" class="error">{{ errors.email }}</p> <button type="submit">提交</button> </form> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const formData = ref({ name: '', email: '', }); const errors = ref({}); const validateForm = () => { errors.value = {}; if (!formData.value.name) { errors.value.name = '请输入姓名'; } if (!formData.value.email) { errors.value.email = '请输入邮箱'; } else if (!isValidEmail(formData.value.email)) { errors.value.email = '请输入有效的邮箱地址'; } return Object.keys(errors.value).length === 0; }; const submitForm = () => { if (validateForm()) { // 表单校验通过,提交表单 console.log('表单校验通过,提交表单'); } }; const isValidEmail = (email) => { // 简单的邮箱格式校验 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); }; return { formData, errors, submitForm, }; }, }; </script> <style> .error { color: red; } </style> ``` 这个示例代码演示了如何使用Vue 3和uni-app实现表单校验。在模板中,我们使用`v-model`指令绑定表单输入的值,并使用`v-if`指令根据校验结果显示错误信息。在`setup`函数中,我们定义了`formData`和`errors`的响应式变量,并编写了`validateForm`函数来进行表单校验。最后,在提交表单时,我们调用`validateForm`函数来判断表单是否通过校验,如果通过则提交表单
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值