当前位置：首页 > ds >正文

vant表单自定义校验

ds 2025/7/6 12:52:48

在这里插入图片描述

昵称：可以输入只允许输入汉字、数字、字母、中英文小括号，并且10个字符以内。除此之外其他的特殊符号不允许输入。
密码：只允许输入字母、数字
确认密码：只允许输入字母、数字。且与密码输入一致

   <van-form validate-first ref="register" class="login-form" v-if="currentSwipeItem == 0"><div class="p-r"><van-field v-model="nickname" required clearable label="昵称" placeholder="支持输入文字、英文、数字"name="username" :error="false" :rules="nikenameRules" /></div><div class="p-r"><van-field v-model="password" required clearable label="密码" placeholder="请输入" name="password":error="false" :rules="passwordRules"></van-field></div><div class="p-r"><van-field v-model="againpassword" required clearable label="确认密码" placeholder="请输入"name="againpassword" :error="false" :rules="againpasswordRules"></van-field></div></van-form>

   nickname: '',password: '',againpassword: '',nikenameRules: [{required: true,message: '昵称不能为空',trigger: 'onBlur'}, {// 自定义校验规则validator: (value) => {if (value.length > 10) {return '限制输入10个字'}// 可以输入只允许输入汉字、数字、字母、中英文小括号，并且10个字符以内。除此之外其他的特殊符号不允许输入。var reg = /^[\w\u4E00-\u9FA5()（）&]{0,10}$/if (!reg.test(value)) {console.log('dfasdf')return "请输入汉字、数字或字母"}},message: '请输入正确格式的昵称',trigger: 'onBlur'}],passwordRules: [{required: true,message: '密码不能为空',trigger: 'onBlur'}, {// 自定义校验规则validator: (value) => {if (value.length < 6 || value.length > 16) {return '限制输入6-16位密码'}// 可以输入只允许输入数字、字母var reg = /[_a-zA-Z]/if (!reg.test(value)) {return "请输入字母或数字"}},message: '请输入正确格式的密码',trigger: 'onBlur'}],againpasswordRules: [{required: true,message: '确认密码不能为空',trigger: 'onBlur'}, {// 自定义校验规则validator: (value) => {if (value.length < 6 || value.length > 16) {return '限制输入6-16位密码'}// 可以输入只允许输入数字、字母。var reg = /[_a-zA-Z]/if (!reg.test(value)) {console.log('dfasdf')return "请输入字母或数字"}// 与上面的密码进行校验if (this.password && value !== this.password) {return "与输入密码不一致"}if (!this.password) {return "请先输入密码"}},message: '请输入正确格式的确认密码',trigger: 'onBlur'}]