vant 组件的表单校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了vant 组件的表单校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vant库中存在的form表单校验是通过 rules 属性来定义校验规则的.

<van-form @submit="getform">
	<div class="form">
	<van-cell-group>
		<van-field class="item" v-model="form.name" error required label="学校名称:" />
		<van-field class="item" v-model="form.principal"  error required label="校长姓名" />
		<van-field class="item" v-model="form.phone" error type="number" required :colon="true" :rules="userFrom.tel" name="tel"
						 label="校长电话" />
		<van-field class="item" v-model="form.code" error required label="业务人员编号:" label-width="40%" />
	</van-cell-group>
	</div>
	<van-button type="info" round color="#365EEF" native-type="submit">确定</van-button>
</van-form>

使用 :rules="userFrom.tel" 定义校验的规则,对于手机号的校验

userFrom:{
    tel:[
        { required: true, message: '手机号码不能为空！' },
        { validator: (val) => {
              return  /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(val)
         },
         message: '格式不正确'
         }
         ]
         },

举例 : 例子是通过 validator 进行函数校验,

vant提供的三种校验

1.通过 pattern 进行正则校验

2.通过 validator 进行函数校验

3.通过 validator 进行异步函数校验

通过@submit="getform"提交表单数据文章来源地址https://www.toymoban.com/news/detail-686327.html

getform () {
			if(this.form.name.trim().length == 0 || this.form.principal.trim().length == 0 || 
			this.form.phone.trim().length == 0 || this.form.code.trim().length == 0 || this.form.address == '' ){
				Toast('请填写完整信息')
				return
			}
			this.showinp = false;
			subMessage(this.form)
			.then(res=>{
				console.log(res);
				const msg = res.data.msg
				if(res.data.code == 200){
					Toast.success(msg);
					setTimeout(()=>{
						this.init();
					},500)
					
				}
				if(res.data.code !== 200){
					Toast.fail('录入失败,请重试');
				}
			})
		},

到了这里，关于vant 组件的表单校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！