uni-app form表单校验

太过爱你忘了你带给我的痛 2023-01-06 04:24 629阅读 0赞

[插件][Link 1]

主要对 `name` 字段进行必填验证，提交事件通过 `form-type` 绑定

<uni-forms ref="signUpForm" :value="signUpFormData" :rules="rules">
    	<uni-forms-item label="" name="username">
    		<uni-easyinput type="number" placeholder="请输入登录手机号码" v-model="signUpFormData.username" />
    	</uni-forms-item>
    	<button form-type="submit" @click="handleSignUp">登录</button>
    </uni-forms>
    
    data() {
    	return {
    		rules: {
    			username: {
    				rules: [{
    					required: true,
    					errorMessage: '请输入注册手机号码'
    				},{
    					validateFunction:function(rule, value, data, callback) {
    						let iphoneReg = /^1[0-9]{10}$/
    						if (!iphoneReg.test(value)) {
    							callback('手机号码格式不正确，请重新填写')
    						}
    						return true
    					}
    				}]
    			}
    		}
    	}
    },
    methods: {
    	handleSignUp() {
    		this.$refs.signUpForm.submit().then(params =>{
    			params.code = '95'
    			params.uuid = this.signUpFormData.uuid
    			this.$SignUp.login(params).then(res => {
    				console.log(res, 'res')
    				uni.navigateTo({
    					url: '/pages/template/news/index'
    				})
    			})
    		})
    	}
    }

`validate-trigger` 属性，有俩个属性值 `bind/submit`，默认submit，表示只有在点击提交按钮后，才会进行校验；bind 是边输入边校验，只有在输入正确的格式后才会关掉错误提示

`<uni-easyinput type="password" placeholder="请输入登录密码" v-model="signUpFormData.password" />` 输入框 type 类型为 `password` 时表示密码输入，密码会被隐藏掉，右侧出现眼睛按钮  
![在这里插入图片描述][2021011321434716.PNG_pic_center]  
[ElementUI：关于 el-formM必填项的校验规则][ElementUI_ el-formM]  
[vue + ivew 校验form表单俩次密码输入是否一致][vue _ ivew _form]

[Link 1]: https://ext.dcloud.net.cn/plugin?id=2773
[2021011321434716.PNG_pic_center]: /images/20221119/1abb6ebaa56441b383d518f905b24ee9.png
[ElementUI_ el-formM]: https://blog.csdn.net/weixin_43900414/article/details/107670469
[vue _ ivew _form]: https://blog.csdn.net/weixin_43900414/article/details/116598811?spm=1001.2014.3001.5501