uni-app 表单验证

uni-app 表单验证

uni-app的内置组件已经有了 组件，用于提交表单内容。

‘uni-forms’ 提供了 rules属性来描述校验规则、‘uni-forms-item’子组件来包裹具体的表单项…

注意事项：
1、组件需要依赖 sass 插件 ，请自行手动安装
2、resetFields 方法不会重置原生组件和三方组件的值
3、如果配置 validateTrigger 属性为 bind 且表单域组件使用 4、input 事件触发会耗损部分性能，请谨慎使用

*本文只用做记录及学习使用 *

<uni-forms modelValue="formData" name="phone" ref="setPwdForm" :rules="rules">
	<uni-forms-item label="手机号:">
		<uni-easyinput type="number" v-model="formData.phone" maxlength="11" placeholder="请输入11位电话号码" />
	</uni-forms-item>
</uni-forms>

//验证规则
rules: {
	  phone: {
	  	rules: [{
	  		required: true,
	  		errorMessage: '请输入手机号码'
	  	},{
	  		pattern:/^[1]([3-9])[0-9]{9}$/,
			errorMessage: '手机号不合法！'
	}]
},
//js代码
passwordConfirm() {
	 this.$refs.setPwdForm.validate().then(res=>{
		console.log('表单数据信息：', res);
		}).catch(err =>{
			console.log('表单错误信息：', err);
		})
	// 发起网略请求
}

试了一下正则校验不成功，然后又翻了一下官网，里边有一段有关正则验证的注意事项。

pattern属性说明 在小程序中，json 中不能使用正则对象，如：/^\S+?@\S+?.\S+?KaTeX parse error: Got function '\newline' with no arguments as superscript at position 1: \̲n̲e̲w̲l̲i̲n̲e̲’ ，需要注意 \ 需要使用 \ 来转译。 如验证邮箱：/^\S+?@\S+?.\S+?KaTeX parse error: Undefined control sequence: \S at position 18: …（注意不带引号）,或使用 "^\̲S̲+?@\S+?\.\S+?"（注意带引号需要使用 \ 转义）

所以对pattern正则验证做了修改：

pattern:'(/^[1]([3-9])[0-9]{9}$/)',

完美解决。。。
后续遇到问题会继续记录。。。