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) => {
		// 操作
	}
}
微信小程序中,你可以使用uView框架提供的组件和工具来实现短信登录功能,并对手机号和短信进行校验。下面是一个简单的示例: 1. 首先,确保已经安装了uView。在小程序项目的根目录下执行以下命令进行安装: ```shell npm install uview-ui ``` 2. 在app.vue文件中引入uView的样式和组件: ```vue <style> @import 'uview-ui/index.scss'; </style> <script> import { $u } from 'uview-ui'; export default { onLaunch: function () { // 初始化uView $u.init(); } }; </script> ``` 3. 创建一个登录页面,使用uView表单验证工具进行手机号和短信验证码的校验: ```vue <template> <view> <form @submit="submitForm"> <view class="u-input"> <u-input v-model="phoneNumber" :rules="[ { required: true, message: '请输入手机号码' }, { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确' } ]" placeholder="请输入手机号码" ></u-input> </view> <view class="u-input"> <u-input v-model="smsCode" :rules="[ { required: true, message: '请输入短信验证码' } ]" placeholder="请输入短信验证码" ></u-input> </view> <button type="primary" form-type="submit">登录</button> </form> </view> </template> <script> import { $u } from 'uview-ui'; export default { data() { return { phoneNumber: '', smsCode: '' }; }, methods: { submitForm() { if (!$u.validPhone(this.phoneNumber)) { $u.toast('手机号码格式不正确'); return; } if (this.smsCode.length !== 6) { $u.toast('短信验证码格式不正确'); return; } // 执行短信登录逻辑 } } }; </script> ``` 在上述代码中,我们使用了uView的`u-input`组件来获取用户输入的手机号码和短信验证码,并通过`rules`属性设置了校验规则。`$u.validPhone`方法用于校验手机号码的格式是否正确。当用户点击登录按钮时,调用`submitForm`方法进行表单提交前的校验。 请注意,以上代码仅适用于使用uView框架进行开发的微信小程序项目。如果你使用其他框架或原生小程序开发,需要根据具体情况选择相应的表单验证工具和方法。同时,你还需要在服务器端实现短信验证码的发送和校验逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值